<<<<<<< HEAD
<script setup>
  import { ref,onMounted } from 'vue';
  import { getDeviceList, deleteDeviceInfo } from '@/api/DevConnection';
  import { message } from "@/utils/message";
  import { ElMessageBox } from 'element-plus';
  import AddDialogTable from './components/AddDialogTable.vue';
  import ProtocolConfigDrawer from './components/ProtocolConfigDrawer.vue';
  import CollectSettingDrawer from './components/CollectSettingDrawer.vue';

  onMounted(() => {
    getApiTableDataList();
  });

  // 协议配置
  const protocolConfigDrawer = ref(false);
  const devClickProtocolConfig = () => {
    if (!devVarTableSelectedId.value) {
      message('请先选择需要配置的资源', { type: 'warning' })
      return;
    }
    protocolConfigDrawer.value = true;
  };
  // 协议配置抽屉关闭子组件传值
  const childProtocolDrawerChange = (val) => {
    protocolConfigDrawer.value = val;
  };

  // 采集设置
  const collectSettingDrawer = ref(false);
  const devClickCollectSetting = () => {
    if (!devVarTableSelectedId.value) {
      message('请先选择需要配置的资源', { type: 'warning' })
      return;
    }
    collectSettingDrawer.value = true;
  };
  // 采集设置抽屉关闭子组件传值
  const childCollectDrawerChange = (val) => {
    collectSettingDrawer.value = val;
  };

  // 添加按钮,添加设备、产品、服务
  const dialogVisible = ref(false)
  const devClickAdd = () => {
    dialogVisible.value = true;
  };

  // 添加资源完成,重新请求资源列表
  const childDialogChange = (obj) => {
    dialogVisible.value = obj.value;
    if (obj.type === 'success') {
      getApiTableDataList();
    }
  };

  // 获取设备、产品、服务列表
  const devVarArrTableData = ref([
    {
      type: '',
      fitNum: '',
      itemList: [],
      fitList: []
    },
    {
      type: '',
      fitNum: '',
      itemList: [],
      fitList: []
    },
    {
      type: '',
      fitNum: '',
      itemList: [],
      fitList: []
    }
  ]),
  selectedItemKeys = ref([]);
  const getApiTableDataList = () => {
    getDeviceList().then(res => {
      if (res.status === 200) {
        selectedItemKeys.value = res.data;
        devVarArrTableData.value = [
          {
            type: '',
            fitNum: '',
            itemList: [],
            fitList: []
          },
          {
            type: '',
            fitNum: '',
            itemList: [],
            fitList: []
          },
          {
            type: '',
            fitNum: '',
            itemList: [],
            fitList: []
          }
        ];
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i].deviceType === '设备' /*&& res.data[i].isDeleted === 0*/) {
            // devVarObjTableData.value.equipment.push(res.data[i])
            devVarArrTableData.value[0].type = res.data[i].deviceType;
            devVarArrTableData.value[0].itemList.push(res.data[i]);
            if (res.data[i].state === 1) {
              devVarArrTableData.value[0].fitList.push(res.data[i]);
            }
          } else if (res.data[i].deviceType === '产品' /*&& res.data[i].isDeleted === 0*/) {
            // devVarObjTableData.value.service.push(res.data[i])
            devVarArrTableData.value[1].type = res.data[i].deviceType;
            devVarArrTableData.value[1].itemList.push(res.data[i]);
            if (res.data[i].state === 1) {
              devVarArrTableData.value[1].fitList.push(res.data[i]);
            }
          } else if (res.data[i].deviceType === '服务' /*&& res.data[i].isDeleted === 0*/) {
            // devVarObjTableData.value.production.push(res.data[i])
            devVarArrTableData.value[2].type = res.data[i].deviceType;
            devVarArrTableData.value[2].itemList.push(res.data[i]);
            if (res.data[i].state === 1) {
              devVarArrTableData.value[2].fitList.push(res.data[i]);
            }
          }
          if (devVarTableSelectedId.value === res.data[i].id) {
            devVarTableSelectedItem.value = res.data[i];
          }
        }
      } else {
        message(res.message, { type: 'error' })
      }
    }).catch(err => {
      console.log(err)
    })
  };

  // 鼠标点击选中设备、产品、服务以后高亮
  const devVarCollectDisabled = ref(false),
    devVarTableSelectedId = ref(null),
    devVarTableSelectedItem = ref(null);
  const devClickTableSelected = (item) => {
    if (devVarTableSelectedId.value && devVarTableSelectedId.value === item.id) {
      devVarTableSelectedId.value = null;
      devVarTableSelectedItem.value = null;
    } else {
      devVarTableSelectedId.value = item.id;
      devVarTableSelectedItem.value = item;
    }
    if (item.state === 0) {
      devVarCollectDisabled.value = true;
    } else {
      devVarCollectDisabled.value = false;
    }

    // this.id = selectedItem.id
    // this.deviceType = selectedItem.deviceType
    // this.dev_name = selectedItem.deviceName
    // this.NetId= selectedItem.gatewayId
    // this.port = selectedItem.connector
    // this.getway_id = selectedItem.protocol
    // this.slaveAddress1 = selectedItem.passiveAddress
    // this.slaveip = selectedItem.passiveIp
    // this.portid = selectedItem.passivePort
    // this.m_type  =  selectedItem.protocolType
    // this.addr =  selectedItem.protocolAddress
    // this.num = selectedItem.protocolNumber
    // this.tar_addr = selectedItem.targetAddress
    // this.tar_port = selectedItem.targetPort
    // this.device_account = selectedItem.deviceAccount
    // this.device_pwd = selectedItem.devicePassword
    // this.clientId = selectedItem.clientId
    // this.sub_topic = selectedItem.subscribeTopic
    // this.issue_topic = selectedItem.releaseTopic
    // this.qos = selectedItem.qos
    // this.cls = selectedItem.clearSession
    // this.URL = selectedItem.url
    // this.securityPolicy = selectedItem.securityPolicy
    // this.file = selectedItem.nodePath
    // this.password = selectedItem.certificates
    // this.dataReading = selectedItem.readingMethod
    // this.timeout = selectedItem.timeoutSetting
    // this.RSbaud =selectedItem.baudRate
    // this.RSdataBit = selectedItem.dataBit
    // this.RSstopBit = selectedItem.stopBit
    // this.RSschool = selectedItem.verify
    // this.CANZformat = selectedItem.frameFormat
    // this.CANZtype =  selectedItem.frameType
    // this.CANZid = selectedItem.frameId
    // this.WIFIid = selectedItem.wifiAccount
    // this.WIFIpassword = selectedItem.wifiPassword
  }

  // 删除设备、产品、服务
  const devClickTableDelete = (item) => {
    ElMessageBox.confirm('确定要删除吗?',{ type: 'warning',}).then(() => {
      deleteDeviceInfo({id: item.id}).then(res => {
        if (res.status === 200) {
          getApiTableDataList();
          message('删除成功！', { type: 'success' });
        } else {
          message(res.message, { type: 'error' });
        }
      }).catch(err => {
        console.log(err);
      })
    }).catch(() => {
      // catch error
    })
  }
</script>

<template>
  <div class="dev-wrapper">
    <div class="dev-header">
      <div class="dev-header-left">
        <el-button @click="devClickProtocolConfig">协议配置</el-button>
        <el-button @click="devClickCollectSetting" :disabled="devVarCollectDisabled">采集设置</el-button>
      </div>
      <el-button type="primary" @click="devClickAdd">添  加</el-button>
    </div>
    <div class="dev-body-main">
      <!-- 设备、产品、服务 -->
      <div class="dev-body-item" v-for="tableList in devVarArrTableData" :key="tableList">
        <div class="dev-body-title">
          <h3 class="dev-body-text">{{ tableList.type }}</h3>
          <span class="dev-body-tips">接入{{ tableList.itemList.length }}个，适配{{ tableList.fitList.length }}个</span>
        </div>
        <div class="dev-body-table">
          <div class="table-block-box"
            v-for="item in tableList.itemList"
            :key="item"
            :class="[
              item.id === devVarTableSelectedId ? 'table-selected-active' : '',
              item.state === 1 ? 'table-shadow-green' : '',
              item.state === 0 ? 'table-shadow-red' : '',
            ]"
          >
            <div class="table-block" @click="devClickTableSelected(item)">
              <div class="table-block-title">
                <div class="table-block-text">{{ item.deviceName }}</div>
                <el-button class="table-block-del" link type="primary" @click.stop="devClickTableDelete(item)">删除</el-button>
              </div>
              <div class="table-block-status">设备状态：{{ item.state === 0 ? '未适配' : '已适配' }}</div>
              <div class="table-block-id">网关ID:{{ item.gatewayId }}</div>
            </div>
=======
<template>
  <div class="equAcc">
    <div class="header">
      <el-button class="protocol-config-button" @click="protocolConfig">协议配置</el-button>
      <el-button class="acqu-setting-button" @click="acquSetting" :disabled = "disabled__">采集设置</el-button>
      <el-button type="primary" style="padding: 0 40px;" class="add" @click="Add"
        >添加</el-button
      >
    </div>
    <div class="equipment">
      <h3 style="display:inline-block;padding:0 15px;">设备</h3>
      <span>接入{{this.equipment.length}}个，适配{{this.equ_fit_num}}个</span>
      <div class="table">
        <div
          class="cell"
          v-for="item in equipment"
          :key="item"
          :class="{
            selected: item.selected,
            adapted: item.state === 1,
            unadapted: item.state === 0,
          }"
          style="position: relative"
          @click="EquipmentSelected(item)"
        >
          <div class="cell-box">
            <el-button
              class="delete-btn table-dele-btn"
              link
              type="primary"
              @click="deleteEquipment(item)">
              删除
            </el-button>
            <div class="table-title">{{ item.deviceName}}</div>
            <div class="table-status">设备状态：{{ item.state === 0 ? '未适配' : '已适配' }}</div>
            <div class="table-id">网关ID:{{ item.gatewayId }}</div>
>>>>>>> 3b24feac27ff1f3481308d21c3f5277aa3dbd283
          </div>
        </div>
      </div>
    </div>

<<<<<<< HEAD
    <!-- 协议配置 -->
    <ProtocolConfigDrawer
      :protocolConfig-drawer="protocolConfigDrawer"
      :devVarTableSelected-item="devVarTableSelectedItem"
      @childProtocolDrawer="childProtocolDrawerChange"
      @childGetApiTableDataList="getApiTableDataList"
    ></ProtocolConfigDrawer>
    <!-- 采集设置 -->
    <CollectSettingDrawer
      :collectSetting-drawer="collectSettingDrawer"
      :devVarTableSelected-item="devVarTableSelectedItem"
      @childCollectDrawer="childCollectDrawerChange"
    ></CollectSettingDrawer>
    <!-- 添加资源设备、产品、服务 -->
    <AddDialogTable
      :dialog-visible="dialogVisible"
      :selected-itemKeys="selectedItemKeys"
      @childDialogVisible="childDialogChange"
    ></AddDialogTable>
  </div>
</template>

<style>
  .dev-body-main::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 8px;
    background-color: #F5F5F5;
  }

  .dev-body-main::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
  }

  .dev-body-main::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #8b8b8b;
  }

  .dev-body-table::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 8px;
    background-color: #F5F5F5;
  }

  .dev-body-table::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
  }

  .dev-body-table::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #8b8b8b;
  }
</style>

<style lang="scss" scoped>
  .dev-wrapper {
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-weight: 500;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    background-color: #fff;

    .dev-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 10px 10px;
    }

    .dev-body-main {
      height: calc(100% - 57px);
      overflow: auto;
      
      .dev-body-item {
        width: 100%;
        /* height: calc(30% - 30px); */
        .dev-body-title {
          .dev-body-text {
            display: inline-block;
            padding: 0 15px;
          }
        }

        .dev-body-table {
          width: 100%;
          max-height: 232px;
          display: flex;
          /* height: calc(100% - 30px); */
          flex-wrap: wrap;
          overflow: auto;
          margin-top: 10px;

          .table-block-box {
            width: 270px;
            /* height: 140px; */
            border-right: 1px solid #ccc;
            background-color: #fff;
            border-radius: 10px;
            margin: 10px;
            flex-basis: calc(20% - 20px);
            vertical-align: top;

            .table-block {
              padding-left: 14px;
              border-radius: 10px;
              box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);

              .table-block-title {
                display: flex;
                justify-content: space-between;
                padding: 10px 14px 0 0;

                .table-block-text {
                  display: inline-block;
                  font-weight: 700;
                  white-space: nowrap; /* 文本不换行 */
                  overflow: hidden; /* 超出部分隐藏 */
                  text-overflow: ellipsis; /* 显示省略号 */
                }
              }

              .table-block-status {
                margin: 6px 0;
                font-size: 14px;
                color: gray;
              }

              .table-block-id {
                font-size: 14px;
                color: gray;
                padding-bottom: 8px;
              }
            }
          }

          .table-selected-active {
            background-color: #efecec;
            cursor: pointer;
            /* 设置鼠标样式为手型 */
          }

          .table-shadow-green {
            box-shadow: 0px -9px 1px -3px #6fc444;
          }

          .table-shadow-red {
            box-shadow: 0px -9px 1px -3px red;
          }
        }
      }
    }
  }
=======
    <div class="production">
      <h3 style="display:inline-block;padding:0 15px;">产品</h3>
      <span>接入{{this.production.length}}个，适配{{this.pro_fit_num}}个</span>
      <div class="table">
        <div
          class="cell"
          v-for="item in production"
          :key="item"
          :class="{
            selected: item.selected,
            adapted: item.state === 1,
            unadapted: item.state === 0,
          }"
          style="position: relative"
          @click="ProductionSelected(item)"
        >
          <div class="cell-box">
            <el-button
              class="delete-btn table-dele-btn"
              link
              type="primary"
              @click="deleteProduction(item)">
              删除
            </el-button>
            <div class="table-title">{{ item.deviceName }}</div>
            <div class="table-status">产品状态：{{ item.state === 0 ? '未适配' : '已适配' }}</div>
            <div class="table-id">网关ID:{{ item.gatewayId }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="service">
      <h3 style="display:inline-block;padding:0 15px;">服务</h3>
      <span>接入{{this.service.length}}个，适配{{this.ser_fit_num}}个</span>
      <div class="table">
        <div
          class="cell"
          v-for="item in service"
          :key="item"
          :class="{
            selected: item.selected,
            adapted: item.state === 1,
            unadapted: item.state === 0,
          }"
          style="position: relative"
          @click="ServiceSelected(item)"
        >
          <div class="cell-box">
            <el-button
              class="delete-btn table-dele-btn"
              link
              type="primary"
              @click="deleteService(item)">
              删除
            </el-button>
            <div class="table-title">{{ item.deviceName }}</div>
            <div class="table-status">服务状态：{{ item.state === 0 ? '未适配' : '已适配' }}</div>
            <div class="table-id">网关ID:{{ item.gatewayId }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="添加"
      width="880"
      :before-close="handleClose_dialog"
    >
      <div class="content">
        <div class="c_header">
          <span>资源类型：</span>
          <el-select clearable v-model="r_type" style="width: 280px">
            <el-option
              v-for="item in r_type_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- <span style="padding: 0 10px"></span>
            <span>设备类型：</span>
            <el-select v-model="e_type" style="width: 160px">
            <el-option
              v-for="item in e_type_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
          <span style="padding: 0 10px"></span>
          <span>资源名称：</span>
            <el-input v-model="name" style="width: 280px" />
          <span style="padding: 0 10px;margin-right: 10px"></span>
          <el-button @click="getResourceList" type="primary" style="width: 90px;">搜索</el-button>
        </div>
        <div class="table">
          <el-table
            class="custom-table"
            :data="tableData"
            border
            style="width: 100%;"
            stripe
            max-height="390"
            @selection-change="resourceSelectionChange"
          >
            <el-table-column type="selection"/>
            <el-table-column prop="deviceType" label="资源类型"></el-table-column>
            <el-table-column prop="deviceName" label="资源名称"></el-table-column>
            <!-- <el-table-column prop="selection_" label="选择">
              <template v-slot="{ row }">
                <el-checkbox
                  v-model="row.selection_"
                  :true-value="'true'"
                  :false-value="'false'"
                  :disabled="row.disabled"
                ></el-checkbox>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="AddSure"> 确认 </el-button>
          <!-- <el-button type="primary" @click="DeleteTable">删除</el-button> -->
          <el-button @click="dialogCancel">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 协议配置抽屉 -->
    <el-drawer
      v-model="drawer"
      title="协议配置"
      :direction="direction"
      :before-close="handleClose"
    >
    <!-- 网关端口协议 -->
      <div>
        <span class="protocol">网关ID</span>
        <span class="port">接口</span>
        <span class="getway_id">协议</span>
        <span class="protocol_s">
          <el-input v-model="NetId" style="width: 125px" />
        </span>
        <span class="port_s">
          <el-select v-model="port" style="width: 130px">
            <el-option
              v-for="item in port_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </span>
        <span class="getway_id_s">
          <el-select v-model="getway_id" style="width: 130px; margin-left: 0px" @change="ProtocolChange">
            <el-option
              v-for="item in getway_id_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </span>
      </div>
    <div class="Port" >
      <!-- <div class="RS485" v-if="port == '0'">
        <h4 style="margin-left: 10px;margin-top: 20px;">端口</h4>
        <div class="port_setting">
          <div class="baud">
            <span style="display: block">波特率</span>
            <span>
              <el-select v-model="RSbaud" style="width: 100px">
                <el-option
                  v-for="item in RSbaud_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="dataBits">
            <span style="display: block">数据位</span>
            <span>
              <el-select v-model="RSdataBit" style="width: 100px">
                <el-option
                  v-for="item in RSdataBit_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="stopBits">
            <span style="display: block">停止位</span>
            <span>
              <el-select v-model="RSstopBit" style="width: 100px">
                <el-option
                  v-for="item in RSstopBit_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="school">
            <span style="display: block">校验</span>
            <span>
              <el-select v-model="RSschool" style="width: 100px">
                <el-option
                  v-for="item in RSschool_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
        </div>
      </div>
      <div class="CAN" v-if="port == '1'">
        <h4 style="margin-left: 10px;margin-top: 20px;">端口</h4>
        <div class="port_setting">
          <div class="baud">
            <span style="display: block">波特率</span>
            <span>
              <el-select v-model="CANbaud" style="width: 100px">
                <el-option
                  v-for="item in CANbaud_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class=" Zformat">
            <span style="display: block">帧格式</span>
            <span>
              <el-select v-model="CANZformat" style="width: 100px">
                <el-option
                  v-for="item in CANZformat_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="Ztype">
            <span style="display: block">帧类型</span>
            <span>
              <el-select v-model="CANZtype" style="width: 100px">
                <el-option
                  v-for="item in CANZtype_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="Zid">
            <span style="display: block">帧ID</span>
            <span>
              <el-input v-model="CANZid" style="width: 100px" ></el-input>
            </span>
          </div>
        </div>
      </div>
      <div class="NB-IOT" v-if="port == '2'">
        <h4 style="margin-left: 10px;margin-top: 20px;">端口</h4>

        <div style="padding-left: 10px;margin-top: 20px;">端口号:
          <el-input v-model="portid" style="width: 79%"></el-input>
        </div>
      </div>
      <div class="LoRa" v-if="port == '3'">
        <h4 style="margin-left: 10px;margin-top: 20px;">端口</h4>

        <div style="padding-left: 10px;margin-top: 20px;">端口号:
          <el-input v-model="portid1" style="width: 79%"></el-input>
        </div>
      </div>
      <div class="5G" v-if="port == '4'">
        <h4 style="margin-left: 10px;margin-top: 20px;">端口</h4>

        <div style="padding-left: 10px;margin-top: 20px;">端口号:
          <el-input v-model="portid2" style="width: 79%"></el-input>
        </div>
      </div>
      <div class="4G" v-if="port == '5'">
        <h4 style="margin-left: 10px;margin-top: 20px;">端口</h4>

        <div style="padding-left: 10px;margin-top: 20px;">端口号:
          <el-input v-model="portid3" style="width: 79%;margin-left: 25px;"></el-input>
        </div>
      </div>
       <div class="CAT1" v-if="port == '6'">
        <h4 style="margin-left: 10px;margin-top: 20px;">端口</h4>

        <div style="padding-left: 10px;margin-top: 20px;">端口号:
          <el-input v-model="portid4" style="width: 79%"></el-input>
        </div>
      </div>
      <div class="WIFI" v-if="port == '7'">
        <h4 style="margin-left: 10px;margin-top: 20px;">端口</h4>
        <div style="padding-left: 10px;margin-top: 20px;">端口号:
          <el-input v-model="portid5" style="width: 79%"></el-input>
        </div>
      </div>
 -->
      <div class="RJ45_1" v-if="port == '8'">
      </div>
      <div class="RJ45_2" v-if="port == '9'">
    </div>
    </div>
      <div class="Protocol" >
        <el-divider content-position="left">参数配置:</el-divider>
      <div class="Modbus" v-if="getway_id == '1'">
        <div style="padding-left: 10px;margin-bottom: 10px;"><h4>Modbus RTU</h4></div>

        <div class="mid" style="width: 100%;height: 230px;">
        <div style="padding-left: 10px">从站地址：
          <el-input v-model="slaveAddress1"  placeholder="0x0001(16进制)" style="width: 79%"></el-input>
        </div>
        <div class="moubus_setting">
          <div class="m_type">
            <span style="display: block">类型</span>
            <span>
              <el-select v-model="m_type" style="width: 80px">
                <el-option
                  v-for="item in m_type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="addr">
            <span style="display: block">地址</span>
            <span>
              <el-input v-model="addr" style="width: 80px">
               <!--  <el-option
                  v-for="item in addr_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                /> -->
              </el-input>
            </span>
          </div>
          <div class="num" >
            <span style="display: block">数量</span>
            <span>
              <el-input v-model="num" style="width: 80px">
                <!-- <el-option
                  v-for="item in num_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                /> -->
              </el-input>
            </span>
          </div>
          <el-button type="primary" style="padding: 0 22px;margin-left: 10px;" @click="addToTable"
            >确定
          </el-button>
          <el-button type="primary" style="padding: 0 22px" @click="Deletem_table"
            >删除
          </el-button>
          <div class="m_tab">
            <el-table
              class="custom-table"
              :data="tableData_m"
              border
              style="width: 100%; max-height: 80%; overflow: auto"
              stripe
              @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection" label="选择" width="55"></el-table-column>
            <el-table-column prop="type_m" label="类型"></el-table-column>
            <el-table-column prop="addr_m" label="地址"></el-table-column>
            <el-table-column prop="num_m" label="数量"></el-table-column>
            </el-table>
            <el-button
              type="primary"
              style="padding: 0 20px; margin-top: 10px; margin-left: 85%"
              @click="setting"
              >配置</el-button
            >
          </div>
        </div>
       </div>
      </div>
      <div class="MQTT" v-else-if="getway_id == '2'">
        <h4 style="padding-left: 10px;">MQTT</h4>
        <div class="cont">
          <span class="title">目标地址</span>
          <span class="title">目标端口</span>
          <span class="tar_addr">
            <el-input v-model="tar_addr" placeholder="cloud.alientek.com" style="width: 45%;margin-top: 0px;" />
          </span>
          <span class="tar_port">
            <el-input
            placeholder="1883"
              v-model="tar_port"
              style="width: 45%; margin-left: 22px;margin-top: 0px;"
            />
          </span>
          <span class="title">设备账户</span>
          <span class="title">设备密码</span>
          <span class="device_account">
            <el-input v-model="device_account" placeholder="admin" style="width: 45%;margin-top: 0px;" />
          </span>
          <span class="device_pwd">
            <el-input
              v-model="device_pwd"
              placeholder="password"
              style="width: 45%; margin-left: 22px;margin-top: 0px;"
            />
          </span>
          <span class="title">ClientID</span>
          <span class="title">订阅主题</span>
          <span class="clientId">
            <el-input v-model="clientId" placeholder="alientek" style="width: 45%;margin-top: 0px;" />
          </span>
          <span class="sub_topic">
            <el-input
              v-model="sub_topic"
              placeholder="atk/sub"
              style="width: 45%; margin-left: 22px;margin-top: 0px;"
            />
          </span>
          <span
            class="title"
            style="width: 100%; display: inline-block; margin-top: 0px"
            >发布主题</span
          >
          <span class="issue_topic">
            <el-input v-model="issue_topic"  placeholder="atk/pub" style="width: 45%" />
          </span>

          <div class="sel" style="margin-top: 0px">
            <span class="title">QOS</span>
            <span class="title1">清理会话状态</span>
            <el-select v-model="qos" placeholder="Select" style="width: 45%">
              <el-option
                v-for="item in qos_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-select
              v-model="cls"
              placeholder="Select"
              style="width: 45%; margin-left: 20px"
            >
              <el-option
                v-for="item in cls_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div
            class="conf"
            style="text-align: right; margin-top: 20px; margin-right: 24px"
          >
            <el-button type="primary" @click="setting" style="padding: 0 40px">配置</el-button>
          </div>
        </div>

      </div>
      <div class="Modbus TCP" v-else-if="getway_id == '3'">
        <div style="padding-left: 10px;margin-bottom: 10px;"><h4>Modbus TCP</h4></div>

        <div class="mid" style="width: 100%;height: 270px;">
        <div style="padding-left: 10px">从站IP：
          <el-input v-model="slaveip" placeholder="127.0.0.1" style="width: 79%"></el-input>
        </div>
        <div style="padding-left: 10px;margin-top: 20px;">端口号：
          <el-input v-model="portid" placeholder="1001" style="width: 79%"></el-input>
        </div>
        <div class="moubus_setting">
          <div class="m_type">
            <span style="display: block">类型</span>
            <span>
              <el-select v-model="m_type" style="width: 80px">
                <el-option
                  v-for="item in m_type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="addr">
            <span style="display: block">地址</span>
            <span>
              <el-input v-model="addr" style="width: 80px">
<!--                 <el-option
                  v-for="item in addr_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                /> -->
              </el-input>
            </span>
          </div>
          <div class="num" >
            <span style="display: block">数量</span>
            <span>
              <el-input v-model="num" style="width: 80px">
 <!--                <el-option
                  v-for="item in num_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                /> -->
              </el-input>
            </span>
          </div>
          <el-button type="primary" style="padding: 0 22px;margin-left: 10px;" @click="addToTable"
            >确定
          </el-button>
          <el-button type="primary" style="padding: 0 22px" @click="Deletem_table1"
            >删除
          </el-button>
          <div class="m_tab">
            <el-table
              class="custom-table"
              :data="tableData_m"
              border
              style="width: 100%; max-height: 80%; overflow: auto"
              stripe
              @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection"  width="55"></el-table-column>
              <el-table-column prop="type_m" label="类型"></el-table-column>
              <el-table-column prop="addr_m" label="地址"></el-table-column>
              <el-table-column prop="num_m" label="数量"></el-table-column>
            </el-table>
            <el-button
              type="primary"
              style="padding: 0 20px; margin-top: 10px; margin-left: 85%"
              @click="setting"
              >配置</el-button
            >
          </div>

        </div>
       </div>
      </div>
      <div class="MQTT_SN" v-else-if="getway_id == '4'">
        <h4 style="padding-left: 10px;">MQTT_SN</h4>
        <div class="cont">
          <span class="title">目标地址</span>
          <span class="title">目标端口</span>
          <span class="tar_addr">
            <el-input v-model="tar_addr" placeholder="cloud.alientek.com" style="width: 45%;margin-top: 0px;" />
          </span>
          <span class="tar_port">
            <el-input
              v-model="tar_port"
              placeholder="1883"
              style="width: 45%; margin-left: 22px;margin-top: 0px;"
            />
          </span>
          <span class="title">设备账户</span>
          <span class="title">设备密码</span>
          <span class="device_account">
            <el-input v-model="device_account" placeholder="admin" style="width: 45%;margin-top: 0px;" />
          </span>
          <span class="device_pwd">
            <el-input
              v-model="device_pwd"
              placeholder="password"
              style="width: 45%; margin-left: 22px;margin-top: 0px;"
            />
          </span>
          <span class="title">ClientID</span>
          <span class="title">订阅主题</span>
          <span class="clientId">
            <el-input v-model="clientId" placeholder="alientek" style="width: 45%;margin-top: 0px;" />
          </span>
          <span class="sub_topic">
            <el-input
              v-model="sub_topic"
              placeholder="atk/sub"
              style="width: 45%; margin-left: 22px;margin-top: 0px;"
            />
          </span>
          <span
            class="title"
            style="width: 100%; display: inline-block; margin-top: 0px"
            >发布主题</span
          >
          <span class="issue_topic">
            <el-input v-model="issue_topic"  placeholder="atk/pub" style="width: 45%" />
          </span>

          <div class="sel" style="margin-top: 0px">
            <span class="title">QOS</span>
            <span class="title1">清理会话状态</span>
            <el-select v-model="qos" placeholder="Select" style="width: 45%">
              <el-option
                v-for="item in qos_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-select
              v-model="cls"
              placeholder="Select"
              style="width: 45%; margin-left: 20px"
            >
              <el-option
                v-for="item in cls_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div
            class="conf"
            style="text-align: right; margin-top: 20px; margin-right: 24px"
          >
            <el-button type="primary" @click="setting" style="padding: 0 40px">配置</el-button>
          </div>
        </div>
      </div>
      <div class="OPC UA" v-else-if="getway_id == '5'">
        <div style="padding-left: 10px;margin-bottom: 10px;"><h4>OPC UA</h4></div>
        <div>
          <div style="padding-left: 10px;margin-top: 20px;">URL:
          <el-input v-model="URL" placeholder="opc.tcp://" style="width: 79%;margin-left: 44px;"></el-input>
        </div>
        <div style="padding-left: 10px;margin-top: 20px;">安全策略:
          <el-select v-model="securityPolicy" style="width:79% ;margin-left: 14px;">
            <el-option
              v-for="item in securityPolicy_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div style="padding-left: 10px;margin-top: 20px;">节点路径:
          <el-input
              v-model="file"
              placeholder="请选择.xml文件"
              style="max-width: 79%;margin-left: 15px;"
              class="input-with-select"
            >
              <template #append>
                <el-button @click="handleFileUpload">...</el-button>
              </template>
          </el-input>
        </div>
        <div style="padding-left: 10px;margin-top: 20px;">证书和密钥:
          <el-input v-model="password" style="width: 79%"></el-input>
        </div>
        </div>
        <div
            class="conf"
            style="text-align: right; margin-top: 20px; margin-right: 10px"
          >
            <el-button type="primary" @click="setting" style="padding: 0 40px">配置</el-button>
          </div>
      </div>
      <div class="HTTP" v-else-if="getway_id == '6'">
        <div style="padding-left: 10px;margin-bottom: 10px;"><h4>HTTP</h4></div>
        <div>
          <div style="padding-left: 10px;margin-top: 20px;">URL:
          <el-input v-model="URL" style="width: 70%;margin-left: 63px;"></el-input>
        </div>
        <div style="padding-left: 10px;margin-top: 20px;">数据读取方法:
          <el-select v-model="dataReading" style="width:70% ">
            <el-option
              v-for="item in dataReading_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div style="padding-left: 10px;margin-top: 20px;">超时设置:
          <el-select v-model="timeout" style="width:70% ;margin-left: 35px;">
            <el-option
              v-for="item in timeout_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        </div>
        <div
            class="conf"
            style="text-align: right; margin-top: 20px; margin-right: 15px"
          >
            <el-button type="primary" @click="setting" style="padding: 0 40px">配置</el-button>
          </div>
      </div>
      <div class="HTTPS" v-else-if="getway_id == '7'">
        <div style="padding-left: 10px;margin-bottom: 10px;"><h4>HTTPS</h4></div>
        <div>
          <div style="padding-left: 10px;margin-top: 20px;">URL:
          <el-input v-model="URL" style="width: 70%;margin-left: 63px;"></el-input>
        </div>
        <div style="padding-left: 10px;margin-top: 20px;">数据读取方法:
          <el-select v-model="dataReading" style="width:70% ">
            <el-option
              v-for="item in dataReading1_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div style="padding-left: 10px;margin-top: 20px;">超时设置:
          <el-select v-model="timeout" style="width:70% ;margin-left: 35px;">
            <el-option
              v-for="item in timeout1_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div style="padding-left: 10px;margin-top: 20px;">SSL/TLS:
          <el-button type="primary" style="padding: 0 60px;margin-left: 40px;" >验证</el-button>
          <el-tag type="success" style="padding: 16px 40px; font-size: 16px;margin-left: 30px;">
              通过
            </el-tag>
        </div>
        </div>
        <div
            class="conf"
            style="text-align: right; margin-top: 20px; margin-right: 20px"
          >
            <el-button type="primary" @click="setting" style="padding: 0 40px">配置</el-button>
          </div>
      </div>
      <div class="Modbus" v-if="getway_id == '8'">
        <div style="padding-left: 10px;margin-bottom: 10px;"><h4>PLC(485)</h4></div>
<!--         <h4 style="margin-left: 10px;margin-top: 20px;">端口</h4>
 -->        <div class="port_setting">
          <div class="baud">
            <span style="display: block">波特率</span>
            <span>
              <el-select v-model="RSbaud" style="width: 100px">
                <el-option
                  v-for="item in RSbaud_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="dataBits">
            <span style="display: block">数据位</span>
            <span>
              <el-select v-model="RSdataBit" style="width: 100px">
                <el-option
                  v-for="item in RSdataBit_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="stopBits">
            <span style="display: block">停止位</span>
            <span>
              <el-select v-model="RSstopBit" style="width: 100px">
                <el-option
                  v-for="item in RSstopBit_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="school">
            <span style="display: block">校验</span>
            <span>
              <el-select v-model="RSschool" style="width: 100px">
                <el-option
                  v-for="item in RSschool_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
        </div>
        <div class="mid" style="width: 100%;height: 230px;">
          <div style="padding-left: 10px">从站地址：
          <el-input v-model="slaveAddress1"  placeholder="0x0001(16进制)" style="width: 79%"></el-input>
        </div>
        <div class="moubus_setting">
          <div class="m_type">
            <span style="display: block">类型</span>
            <span>
              <el-select v-model="m_type" style="width: 80px">
                <el-option
                  v-for="item in m_type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="addr">
            <span style="display: block">地址</span>
            <span>
              <el-input v-model="addr" style="width: 80px">
<!--                 <el-option
                  v-for="item in addr_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                /> -->
              </el-input>
            </span>
          </div>
          <div class="num" >
            <span style="display: block">数量</span>
            <span>
              <el-input v-model="num" style="width: 80px">
                <el-option
                  v-for="item in num_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-input>
            </span>
          </div>
          <el-button type="primary" style="padding: 0 22px;margin-left: 10px;" @click="addToTable"
            >确定
          </el-button>
          <el-button type="primary" style="padding: 0 22px" @click="Deletem_table2"
            >删除
          </el-button>
          <div class="m_tab">
            <el-table
              class="custom-table"
              :data="tableData_m"
              border
              style="width: 100%; max-height: 80%; overflow: auto"
              @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection"  width="55"></el-table-column>
              <el-table-column prop="type_m" label="类型"></el-table-column>
              <el-table-column prop="addr_m" label="地址"></el-table-column>
              <el-table-column prop="num_m" label="数量"></el-table-column>
            </el-table>
            <el-button
              type="primary"
              style="padding: 0 20px; margin-top: 10px; margin-left: 85%"
              @click="setting"
              >配置</el-button
            >
          </div>

        </div>
       </div>
      </div>
      <div class="Modbus" v-if="getway_id == '9'">
        <div style="padding-left: 10px;margin-bottom: 10px;"><h4>CAN(Modbus)</h4></div>
<!--         <h4 style="margin-left: 10px;margin-top: 20px;">端口</h4>
 -->        <div class="port_setting">
          <div class="baud">
            <span style="display: block">波特率</span>
            <span>
              <el-select v-model="RSbaud" style="width: 100px">
                <el-option
                  v-for="item in RSbaud_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class=" Zformat">
            <span style="display: block">帧格式</span>
            <span>
              <el-select v-model="CANZformat" style="width: 100px">
                <el-option
                  v-for="item in CANZformat_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="Ztype">
            <span style="display: block">帧类型</span>
            <span>
              <el-select v-model="CANZtype" style="width: 100px">
                <el-option
                  v-for="item in CANZtype_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="Zid">
            <span style="display: block">帧ID</span>
            <span>
              <el-input v-model="CANZid" style="width: 100px" ></el-input>
            </span>
          </div>
        </div>

        <div class="mid" style="width: 100%;height: 230px;">
          <div style="padding-left: 10px">从站IP：
          <el-input v-model="slaveip" placeholder="127.0.0.1" style="width: 79%"></el-input>
        </div>
        <div class="moubus_setting">
          <div class="m_type">
            <span style="display: block">类型</span>
            <span>
              <el-select v-model="m_type" style="width: 80px">
                <el-option
                  v-for="item in m_type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="addr">
            <span style="display: block">地址</span>
            <span>
              <el-input v-model="addr" style="width: 80px">
  <!--               <el-option
                  v-for="item in addr_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                /> -->
              </el-input>
            </span>
          </div>
          <div class="num" >
            <span style="display: block">数量</span>
            <span>
              <el-input v-model="num" style="width: 80px">
                <el-option
                  v-for="item in num_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-input>
            </span>
          </div>
          <el-button type="primary" style="padding: 0 22px;margin-left: 10px;" @click="addToTable"
            >确定
          </el-button>
          <el-button type="primary" style="padding: 0 22px" @click="Deletem_table3"
            >删除
          </el-button>
          <div class="m_tab">
            <el-table
              class="custom-table"
              :data="tableData_m"
              border
              style="width: 100%; max-height: 80%; overflow: auto"
              @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection"  width="55"></el-table-column>
              <el-table-column prop="type_m" label="类型"></el-table-column>
              <el-table-column prop="addr_m" label="地址"></el-table-column>
              <el-table-column prop="num_m" label="数量"></el-table-column>
            </el-table>
            <el-button
              type="primary"
              style="padding: 0 20px; margin-top: 10px; margin-left: 85%"
              @click="setting"
              >配置</el-button
            >
          </div>

        </div>
       </div>
      </div>
      <div class="MQTT" v-else-if="getway_id == '11'">

       <h3 style="padding-left: 10px;">NB-IOT(MQTT)</h3>
<!--        <div style="padding-left: 10px;margin-top: 10px;">端口号:
          <el-input v-model="portid" placeholder="1001" style="width: 79%;margin-left: 27px;margin-bottom: 10px;"></el-input>
        </div>   -->
       <div class="cont">
         <span class="title">目标地址</span>
         <span class="title">目标端口</span>
         <span class="tar_addr">
           <el-input v-model="tar_addr" placeholder="cloud.alientek.com" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="tar_port">
           <el-input
             v-model="tar_port"
             placeholder="1883"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span class="title">设备账户</span>
         <span class="title">设备密码</span>
         <span class="device_account">
           <el-input v-model="device_account" placeholder="admin" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="device_pwd">
           <el-input
             v-model="device_pwd"
             placeholder="password"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span class="title">ClientID</span>
         <span class="title">订阅主题</span>
         <span class="clientId">
           <el-input v-model="clientId" placeholder="alientek" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="sub_topic">
           <el-input
             v-model="sub_topic"
             placeholder="atk/sub"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span
           class="title"
           style="width: 100%; display: inline-block; margin-top: 0px"
           >发布主题</span
         >
         <span class="issue_topic">
           <el-input v-model="issue_topic"  placeholder="atk/pub" style="width: 45%" />
         </span>

         <div class="sel" style="margin-top: 0px">
           <span class="title">QOS</span>
           <span class="title1">清理会话状态</span>
           <el-select v-model="qos" placeholder="Select" style="width: 45%">
             <el-option
               v-for="item in qos_options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             />
           </el-select>

           <el-select
             v-model="cls"
             placeholder="Select"
             style="width: 45%; margin-left: 20px"
           >
             <el-option
               v-for="item in cls_options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             />
           </el-select>
         </div>
         <div
           class="conf"
           style="text-align: right; margin-top: 20px; margin-right: 24px"
         >
           <el-button type="primary" @click="setting" style="padding: 0 40px">配置</el-button>
         </div>
       </div>

     </div>
     <div class="Modbus" v-if="getway_id == '10'">
        <div style="padding-left: 10px;margin-bottom: 10px;"><h4>NB-IOT(Modbus)</h4></div>

        <div class="mid" style="width: 100%;height: 280px;">
          <div style="padding-left: 10px">从站IP：
          <el-input v-model="slaveip" placeholder="127.0.0.1" style="width: 79%"></el-input>
        </div>
        <div style="padding-left: 10px;margin-top: 20px;">端口号：
          <el-input v-model="portid" placeholder="1001" style="width: 79%"></el-input>
        </div>
        <div class="moubus_setting">
          <div class="m_type">
            <span style="display: block">类型</span>
            <span>
              <el-select v-model="m_type" style="width: 80px">
                <el-option
                  v-for="item in m_type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="addr">
            <span style="display: block">地址</span>
            <span>
              <el-input v-model="addr" style="width: 80px">
<!--                 <el-option
                  v-for="item in addr_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                /> -->
              </el-input>
            </span>
          </div>
          <div class="num" >
            <span style="display: block">数量</span>
            <span>
              <el-input v-model="num" style="width: 80px">
                <el-option
                  v-for="item in num_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-input>
            </span>
          </div>
          <el-button type="primary" style="padding: 0 22px;margin-left: 10px;" @click="addToTable"
            >确定
          </el-button>
          <el-button type="primary" style="padding: 0 22px" @click="Deletem_table4"
            >删除
          </el-button>
          <div class="m_tab">
            <el-table
              class="custom-table"
              :data="tableData_m"
              border
              style="width: 100%; max-height: 80%; overflow: auto"
              @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection"  width="55"></el-table-column>
              <el-table-column prop="type_m" label="类型"></el-table-column>
              <el-table-column prop="addr_m" label="地址"></el-table-column>
              <el-table-column prop="num_m" label="数量"></el-table-column>
            </el-table>
            <el-button
              type="primary"
              style="padding: 0 20px; margin-top: 10px; margin-left: 85%"
              @click="setting"
              >配置</el-button
            >
          </div>

        </div>
       </div>
      </div>
      <div class="Modbus" v-if="getway_id == '12'">
        <div style="padding-left: 10px;margin-bottom: 10px;"><h4>LoRa(Modbus)</h4></div>

        <div class="mid" style="width: 100%;height: 280px;">
          <div style="padding-left: 10px">从站IP：
          <el-input v-model="slaveip" placeholder="127.0.0.1" style="width: 79%"></el-input>
        </div>
        <div style="padding-left: 10px;margin-top: 20px;">端口号：
          <el-input v-model="portid" placeholder="1001" style="width: 79%"></el-input>
        </div>

        <div class="moubus_setting">
          <div class="m_type">
            <span style="display: block">类型</span>
            <span>
              <el-select v-model="m_type" style="width: 80px">
                <el-option
                  v-for="item in m_type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="addr">
            <span style="display: block">地址</span>
            <span>
              <el-input v-model="addr" style="width: 80px">
                <el-option
                  v-for="item in addr_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-input>
            </span>
          </div>
          <div class="num" >
            <span style="display: block">数量</span>
            <span>
              <el-input v-model="num" style="width: 80px">
                <el-option
                  v-for="item in num_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-input>
            </span>
          </div>
          <el-button type="primary" style="padding: 0 22px;margin-left: 10px;" @click="addToTable"
            >确定
          </el-button>
          <el-button type="primary" style="padding: 0 22px" @click="Deletem_table5"
            >删除
          </el-button>
          <div class="m_tab">
            <el-table
              class="custom-table"
              :data="tableData_m"
              border
              style="width: 100%; max-height: 80%; overflow: auto"
              @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection"  width="55"></el-table-column>
              <el-table-column prop="type_m" label="类型"></el-table-column>
              <el-table-column prop="addr_m" label="地址"></el-table-column>
              <el-table-column prop="num_m" label="数量"></el-table-column>
            </el-table>
            <el-button
              type="primary"
              style="padding: 0 20px; margin-top: 10px; margin-left: 85%"
              @click="setting"
              >配置</el-button
            >
          </div>

        </div>
       </div>
      </div>
      <div class="MQTT" v-else-if="getway_id == '13'">

       <h4 style="padding-left: 10px;">LoRa(MQTT)</h4>
<!--        <div style="padding-left: 10px;margin-top: 20px;">端口号:
          <el-input v-model="portid3" placeholder="1001" style="width: 79%;margin-left: 27px;margin-bottom: 10px;"></el-input>
        </div>     -->
       <div class="cont">
         <span class="title">目标地址</span>
         <span class="title">目标端口</span>
         <span class="tar_addr">
           <el-input v-model="tar_addr" placeholder="cloud.alientek.com" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="tar_port">
           <el-input
             v-model="tar_port"
             placeholder="1883"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span class="title">设备账户</span>
         <span class="title">设备密码</span>
         <span class="device_account">
           <el-input v-model="device_account" placeholder="admin" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="device_pwd">
           <el-input
             v-model="device_pwd"
             placeholder="password"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span class="title">ClientID</span>
         <span class="title">订阅主题</span>
         <span class="clientId">
           <el-input v-model="clientId" placeholder="alientek" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="sub_topic">
           <el-input
             v-model="sub_topic"
             placeholder="atk/sub"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span
           class="title"
           style="width: 100%; display: inline-block; margin-top: 0px"
           >发布主题</span
         >
         <span class="issue_topic">
           <el-input v-model="issue_topic"  placeholder="atk/pub" style="width: 45%" />
         </span>

         <div class="sel" style="margin-top: 0px">
           <span class="title">QOS</span>
           <span class="title1">清理会话状态</span>
           <el-select v-model="qos" placeholder="Select" style="width: 45%">
             <el-option
               v-for="item in qos_options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             />
           </el-select>

           <el-select
             v-model="cls"
             placeholder="Select"
             style="width: 45%; margin-left: 20px"
           >
             <el-option
               v-for="item in cls_options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             />
           </el-select>
         </div>
         <div
           class="conf"
           style="text-align: right; margin-top: 20px; margin-right: 24px"
         >
           <el-button type="primary" @click="setting" style="padding: 0 40px">配置</el-button>
         </div>
       </div>

     </div>
     <div class="Modbus" v-if="getway_id == '14'">
        <div style="padding-left: 10px;margin-bottom: 10px;"><h4>5G(Modbus)</h4></div>

        <div class="mid" style="width: 100%;height: 280px;">
          <div style="padding-left: 10px">从站IP：
          <el-input v-model="slaveip" placeholder="127.0.0.1" style="width: 79%"></el-input>
        </div>
        <div style="padding-left: 10px;margin-top: 20px;">端口号：
          <el-input v-model="portid" placeholder="1001" style="width: 79%"></el-input>
        </div>
        <div class="moubus_setting">
          <div class="m_type">
            <span style="display: block">类型</span>
            <span>
              <el-select v-model="m_type" style="width: 80px">
                <el-option
                  v-for="item in m_type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="addr">
            <span style="display: block">地址</span>
            <span>
              <el-input v-model="addr" style="width: 80px">
                <el-option
                  v-for="item in addr_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-input>
            </span>
          </div>
          <div class="num" >
            <span style="display: block">数量</span>
            <span>
              <el-input v-model="num" style="width: 80px">
                <el-option
                  v-for="item in num_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-input>
            </span>
          </div>
          <el-button type="primary" style="padding: 0 22px;margin-left: 10px;" @click="addToTable"
            >确定
          </el-button>
          <el-button type="primary" style="padding: 0 22px" @click="Deletem_table6"
            >删除
          </el-button>
          <div class="m_tab">
            <el-table
              class="custom-table"
              :data="tableData_m"
              border
              style="width: 100%; max-height: 80%; overflow: auto"
              stripe
              @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection"  width="55"></el-table-column>
              <el-table-column prop="type_m" label="类型"></el-table-column>
              <el-table-column prop="addr_m" label="地址"></el-table-column>
              <el-table-column prop="num_m" label="数量"></el-table-column>
            </el-table>
            <el-button
              type="primary"
              style="padding: 0 20px; margin-top: 10px; margin-left: 85%"
              @click="setting"
              >配置</el-button
            >
          </div>

        </div>
       </div>
      </div>
      <div class="MQTT" v-else-if="getway_id == '15'">

       <h4 style="padding-left: 10px;">5G(MQTT)</h4>
<!--        <div style="padding-left: 10px;margin-top: 20px;">端口号:
          <el-input v-model="portid5" placeholder="1001" style="width: 79%;margin-left: 27px;margin-bottom: 10px;"></el-input>
        </div>      -->
       <div class="cont">
         <span class="title">目标地址</span>
         <span class="title">目标端口</span>
         <span class="tar_addr">
           <el-input v-model="tar_addr" placeholder="cloud.alientek.com" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="tar_port">
           <el-input
             v-model="tar_port"
             placeholder="1883"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span class="title">设备账户</span>
         <span class="title">设备密码</span>
         <span class="device_account">
           <el-input v-model="device_account" placeholder="admin" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="device_pwd">
           <el-input
             v-model="device_pwd"
             placeholder="password"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span class="title">ClientID</span>
         <span class="title">订阅主题</span>
         <span class="clientId">
           <el-input v-model="clientId" placeholder="alientek" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="sub_topic">
           <el-input
             v-model="sub_topic"
             placeholder="atk/sub"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span
           class="title"
           style="width: 100%; display: inline-block; margin-top: 0px"
           >发布主题</span
         >
         <span class="issue_topic">
           <el-input v-model="issue_topic"  placeholder="atk/pub" style="width: 45%" />
         </span>

         <div class="sel" style="margin-top: 0px">
           <span class="title">QOS</span>
           <span class="title1">清理会话状态</span>
           <el-select v-model="qos" placeholder="Select" style="width: 45%">
             <el-option
               v-for="item in qos_options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             />
           </el-select>

           <el-select
             v-model="cls"
             placeholder="Select"
             style="width: 45%; margin-left: 20px"
           >
             <el-option
               v-for="item in cls_options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             />
           </el-select>
         </div>
         <div
           class="conf"
           style="text-align: right; margin-top: 20px; margin-right: 24px"
         >
           <el-button type="primary" @click="setting" style="padding: 0 40px">配置</el-button>
         </div>
       </div>

     </div>
     <div class="Modbus" v-if="getway_id == '16'">
        <div style="padding-left: 10px;margin-bottom: 10px;"><h4>4G(Modbus)</h4></div>

        <div class="mid" style="width: 100%;height: 280px;">
          <div style="padding-left: 10px">从站IP：
          <el-input v-model="slaveip" placeholder="127.0.0.1" style="width: 79%"></el-input>
        </div>
        <div style="padding-left: 10px;margin-top: 20px;">端口号：
          <el-input v-model="portid" placeholder="1001" style="width: 79%"></el-input>
        </div>
        <div class="moubus_setting">
          <div class="m_type">
            <span style="display: block">类型</span>
            <span>
              <el-select v-model="m_type" style="width: 80px">
                <el-option
                  v-for="item in m_type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="addr">
            <span style="display: block">地址</span>
            <span>
              <el-input v-model="addr" style="width: 80px">
<!--                 <el-option
                  v-for="item in addr_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                /> -->
              </el-input>
            </span>
          </div>
          <div class="num" >
            <span style="display: block">数量</span>
            <span>
              <el-input v-model="num" style="width: 80px">
<!--                 <el-option
                  v-for="item in num_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                /> -->
              </el-input>
            </span>
          </div>
          <el-button type="primary" style="padding: 0 22px;margin-left: 10px;" @click="addToTable"
            >确定
          </el-button>
          <el-button type="primary" style="padding: 0 22px" @click="Deletem_table7"
            >删除
          </el-button>
          <div class="m_tab">
            <el-table
              class="custom-table"
              :data="tableData_m"
              border
              style="width: 100%; max-height: 80%; overflow: auto"
              @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection"  width="55"></el-table-column>
              <el-table-column prop="type_m" label="类型"></el-table-column>
              <el-table-column prop="addr_m" label="地址"></el-table-column>
              <el-table-column prop="num_m" label="数量"></el-table-column>
            </el-table>
            <el-button
              type="primary"
              style="padding: 0 20px; margin-top: 10px; margin-left: 85%"
              @click="setting"
              >配置</el-button
            >
          </div>

        </div>
       </div>
      </div>
      <div class="MQTT" v-else-if="getway_id == '17'">

       <h4 style="padding-left: 10px;">4G(MQTT)</h4>
<!--        <div style="padding-left: 10px;margin-top: 20px;">端口号:
          <el-input v-model="portid7" placeholder="1001" style="width: 79%;margin-left: 27px;margin-bottom: 10px;"></el-input>
        </div>    -->
       <div class="cont">
         <span class="title">目标地址</span>
         <span class="title">目标端口</span>
         <span class="tar_addr">
           <el-input v-model="tar_addr" placeholder="cloud.alientek.com" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="tar_port">
           <el-input
             v-model="tar_port"
             placeholder="1883"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span class="title">设备账户</span>
         <span class="title">设备密码</span>
         <span class="device_account">
           <el-input v-model="device_account" placeholder="admin" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="device_pwd">
           <el-input
             v-model="device_pwd"
             placeholder="password"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span class="title">ClientID</span>
         <span class="title">订阅主题</span>
         <span class="clientId">
           <el-input v-model="clientId" placeholder="alientek" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="sub_topic">
           <el-input
             v-model="sub_topic"
             placeholder="atk/sub"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span
           class="title"
           style="width: 100%; display: inline-block; margin-top: 0px"
           >发布主题</span
         >
         <span class="issue_topic">
           <el-input v-model="issue_topic"  placeholder="atk/pub" style="width: 45%" />
         </span>

         <div class="sel" style="margin-top: 0px">
           <span class="title">QOS</span>
           <span class="title1">清理会话状态</span>
           <el-select v-model="qos" placeholder="Select" style="width: 45%">
             <el-option
               v-for="item in qos_options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             />
           </el-select>

           <el-select
             v-model="cls"
             placeholder="Select"
             style="width: 45%; margin-left: 20px"
           >
             <el-option
               v-for="item in cls_options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             />
           </el-select>
         </div>
         <div
           class="conf"
           style="text-align: right; margin-top: 20px; margin-right: 24px"
         >
           <el-button type="primary" @click="setting" style="padding: 0 40px">配置</el-button>
         </div>
       </div>

     </div>
     <div class="Modbus" v-if="getway_id == '18'">
        <div style="padding-left: 10px;margin-bottom: 10px;"><h4>CAT1(Modbus)</h4></div>
        <div class="mid" style="width: 100%;height: 280px;">
          <div style="padding-left: 10px">从站IP：
          <el-input v-model="slaveip" placeholder="127.0.0.1" style="width: 79%"></el-input>
        </div>
        <div style="padding-left: 10px;margin-top: 20px;">端口号：
          <el-input v-model="portid" placeholder="1001" style="width: 79%"></el-input>
        </div>
        <div class="moubus_setting">
          <div class="m_type">
            <span style="display: block">类型</span>
            <span>
              <el-select v-model="m_type" style="width: 80px">
                <el-option
                  v-for="item in m_type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="addr">
            <span style="display: block">地址</span>
            <span>
              <el-input v-model="addr" style="width: 80px">
                <el-option
                  v-for="item in addr_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-input>
            </span>
          </div>
          <div class="num" >
            <span style="display: block">数量</span>
            <span>
              <el-input v-model="num" style="width: 80px">
                <el-option
                  v-for="item in num_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-input>
            </span>
          </div>
          <el-button type="primary" style="padding: 0 22px;margin-left: 10px;" @click="addToTable"
            >确定
          </el-button>
          <el-button type="primary" style="padding: 0 22px" @click="Deletem_table8"
            >删除
          </el-button>
          <div class="m_tab">
            <el-table
              class="custom-table"
              :data="tableData_m"
              border
              style="width: 100%; max-height: 80%; overflow: auto"
              @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection"  width="55"></el-table-column>
              <el-table-column prop="type_m" label="类型"></el-table-column>
              <el-table-column prop="addr_m" label="地址"></el-table-column>
              <el-table-column prop="num_m" label="数量"></el-table-column>
            </el-table>
            <el-button
              type="primary"
              style="padding: 0 20px; margin-top: 10px; margin-left: 85%"
              @click="setting"
              >配置</el-button
            >
          </div>

        </div>
       </div>
      </div>
      <div class="MQTT" v-else-if="getway_id == '19'">

       <h4 style="padding-left: 10px;">CAT1(MQTT)</h4>
<!--        <div style="padding-left: 10px;margin-top: 10px;">端口号:
          <el-input v-model="portid9" placeholder="1001" style="width: 79%;margin-left: 27px;margin-bottom: 10px;"></el-input>
        </div> -->
       <div class="cont">
         <span class="title">目标地址</span>
         <span class="title">目标端口</span>
         <span class="tar_addr">
           <el-input v-model="tar_addr" placeholder="cloud.alientek.com" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="tar_port">
           <el-input
             v-model="tar_port"
             placeholder="1883"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span class="title">设备账户</span>
         <span class="title">设备密码</span>
         <span class="device_account">
           <el-input v-model="device_account" placeholder="admin" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="device_pwd">
           <el-input
             v-model="device_pwd"
             placeholder="password"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span class="title">ClientID</span>
         <span class="title">订阅主题</span>
         <span class="clientId">
           <el-input v-model="clientId" placeholder="alientek" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="sub_topic">
           <el-input
             v-model="sub_topic"
             placeholder="atk/sub"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span
           class="title"
           style="width: 100%; display: inline-block; margin-top: 0px"
           >发布主题</span
         >
         <span class="issue_topic">
           <el-input v-model="issue_topic"  placeholder="atk/pub" style="width: 45%" />
         </span>

         <div class="sel" style="margin-top: 0px">
           <span class="title">QOS</span>
           <span class="title1">清理会话状态</span>
           <el-select v-model="qos" placeholder="Select" style="width: 45%">
             <el-option
               v-for="item in qos_options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             />
           </el-select>

           <el-select
             v-model="cls"
             placeholder="Select"
             style="width: 45%; margin-left: 20px"
           >
             <el-option
               v-for="item in cls_options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             />
           </el-select>
         </div>
         <div
           class="conf"
           style="text-align: right; margin-top: 20px; margin-right: 24px"
         >
           <el-button type="primary" @click="setting" style="padding: 0 40px">配置</el-button>
         </div>
       </div>

     </div>
     <div class="Modbus" v-if="getway_id == '20'">
        <div style="padding-left: 10px;margin-bottom: 10px;"><h4>WIFI(Modbus)</h4></div>

        <div class="mid" style="width: 100%;height: 370px;">
          <div style="padding-left: 10px;margin-top: 10px;">WIFI账号:
          <el-input v-model="WIFIid" style="width: 79%;margin-left: 9px;margin-bottom: 5px;"></el-input>
        </div>
         <div style="padding-left: 10px;margin-top: 10px;">WIFI密码:
          <el-input v-model="WIFIpassword" style="width: 79%;margin-left: 9px;margin-bottom: 5px;"></el-input>
        </div>
          <div style="padding-left: 10px;margin-top: 10px;">从站IP：
          <el-input v-model="slaveip" placeholder="127.0.0.1" style="width: 79%;margin-left: 16px;margin-bottom: 5px;"></el-input>
        </div>
        <div style="padding-left: 10px;margin-top: 10px;">端口号:
          <el-input v-model="portid" placeholder="1001" style="width: 79%;margin-left: 27px;margin-bottom: 5px;"></el-input>
        </div>
        <div class="moubus_setting">
          <div class="m_type">
            <span style="display: block">类型</span>
            <span>
              <el-select v-model="m_type" style="width: 80px">
                <el-option
                  v-for="item in m_type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="addr">
            <span style="display: block">地址</span>
            <span>
              <el-input v-model="addr" style="width: 80px">
                <el-option
                  v-for="item in addr_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-input>
            </span>
          </div>
          <div class="num" >
            <span style="display: block">数量</span>
            <span>
              <el-input v-model="num" style="width: 80px">
                <el-option
                  v-for="item in num_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-input>
            </span>
          </div>
          <el-button type="primary" style="padding: 0 22px;margin-left: 10px;" @click="addToTable"
            >确定
          </el-button>
          <el-button type="primary" style="padding: 0 22px" @click="Deletem_table9"
            >删除
          </el-button>
          <div class="m_tab">
            <el-table
              class="custom-table"
              :data="tableData_m"
              border
              style="width: 100%; max-height: 80%; overflow: auto"
              @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection"  width="55"></el-table-column>
              <el-table-column prop="type_m" label="类型"></el-table-column>
              <el-table-column prop="addr_m" label="地址"></el-table-column>
              <el-table-column prop="num_m" label="数量"></el-table-column>
            </el-table>
            <el-button
              type="primary"
              style="padding: 0 20px; margin-top: 10px; margin-left: 85%"
              @click="setting"
              >配置</el-button
            >
          </div>

        </div>
       </div>
      </div>
      <div class="MQTT" v-else-if="getway_id == '21'">

       <h4 style="padding-left: 10px;">WIFI(MQTT)</h4>
       <div style="padding-left: 10px;margin-top: 10px;">WIFI账号:
          <el-input v-model="WIFIid" style="width: 79%;margin-left: 9px;margin-bottom: 5px;"></el-input>
        </div>
         <div style="padding-left: 10px;margin-top: 10px;">WIFI密码:
          <el-input v-model="WIFIpassword" style="width: 79%;margin-left: 9px;margin-bottom: 5px;"></el-input>
        </div>
<!--        <div style="padding-left: 10px;margin-top: 20px;">端口号:
          <el-input v-model="portid11" placeholder="1001" style="width: 79%;margin-left: 27px;margin-bottom: 20px;"></el-input>
        </div>  -->
       <div class="cont">
         <span class="title">目标地址</span>
         <span class="title">目标端口</span>
         <span class="tar_addr">
           <el-input v-model="tar_addr" placeholder="cloud.alientek.com" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="tar_port">
           <el-input
             v-model="tar_port"
             placeholder="1883"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span class="title">设备账户</span>
         <span class="title">设备密码</span>
         <span class="device_account">
           <el-input v-model="device_account" placeholder="admin" style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="device_pwd">
           <el-input
             v-model="device_pwd"
             placeholder="password"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span class="title">ClientID</span>
         <span class="title">订阅主题</span>
         <span class="clientId">
           <el-input v-model="clientId" placeholder="alientek"  style="width: 45%;margin-top: 0px;" />
         </span>
         <span class="sub_topic">
           <el-input
             v-model="sub_topic"
             placeholder="atk/sub"
             style="width: 45%; margin-left: 22px;margin-top: 0px;"
           />
         </span>
         <span
           class="title"
           style="width: 100%; display: inline-block; margin-top: 0px"
           >发布主题</span
         >
         <span class="issue_topic">
           <el-input v-model="issue_topic" placeholder="atk/pub" style="width: 45%" />
         </span>

         <div class="sel" style="margin-top: 0px">
           <span class="title">QOS</span>
           <span class="title1">清理会话状态</span>
           <el-select v-model="qos" placeholder="Select" style="width: 45%">
             <el-option
               v-for="item in qos_options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             />
           </el-select>

           <el-select
             v-model="cls"
             placeholder="Select"
             style="width: 45%; margin-left: 20px"
           >
             <el-option
               v-for="item in cls_options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             />
           </el-select>
         </div>
         <div
           class="conf"
           style="text-align: right; margin-top: 20px; margin-right: 24px"
         >
           <el-button type="primary" @click="setting" style="padding: 0 40px">配置</el-button>
         </div>
       </div>

     </div>
     <div class="OPC UA" v-else-if="getway_id == '22'">
        <div style="padding-left: 10px;margin-bottom: 10px;"><h4>OPC DA</h4></div>
        <div>
          <div style="padding-left: 10px;margin-top: 20px;">URL:
          <el-input v-model="URL" placeholder="opc.tcp://" style="width: 79%;margin-left: 44px;"></el-input>
        </div>
        <div style="padding-left: 10px;margin-top: 20px;">安全策略:
          <el-select v-model="securityPolicy" style="width:79% ;margin-left: 14px;">
            <el-option
              v-for="item in securityPolicy1_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div style="padding-left: 10px;margin-top: 20px;">节点路径:
          <el-input
              v-model="file"
              placeholder="请选择.xml文件"
              style="max-width: 79%;margin-left: 15px;"
              class="input-with-select"
            >
              <template #append>
                <el-button @click="handleFileUpload">...</el-button>
              </template>
          </el-input>
        </div>
        <div style="padding-left: 10px;margin-top: 20px;">证书和密钥:
          <el-input v-model="password" style="width: 79%"></el-input>
        </div>
        </div>
        <div
            class="conf"
            style="text-align: right; margin-top: 20px; margin-right: 10px"
          >
            <el-button type="primary" @click="setting" style="padding: 0 40px">配置</el-button>
          </div>
      </div>
      </div>
      <div class="bottombox" style="width: 100%;margin-top: 50px;">
        <el-divider content-position="left">协议更新与部署:</el-divider>
          <div class="lineCompile">
            <el-progress
              :percentage="compileRate"
              :text-inside="true"
              style="width: 80%; display: inline-block"
              :stroke-width="30"
            />
            <el-button
              style="padding: 0 0 0 40px; margin-bottom: 20px"
              link
              type="primary"
              @click="compile"
              :disabled="c_disabled"
              >编译</el-button
            >
          </div>
          <div class="issue">
            <el-progress
              :percentage="issueRate"
              :text-inside="true"
              style="width: 80%; display: inline-block"
              :stroke-width="30"
            />
            <el-button
              style="padding: 0 0 0 40px; margin-bottom: 40px"
              link
              type="primary"
              @click="issue"
              :disabled="i_disabled"
              >下发</el-button
            >
          </div>
          <el-divider content-position="left">适配状态:</el-divider>
          <!-- <div class="status" style="text-align: center;">
            <el-button
              type="primary"
              style="padding: 0 10%;margin-right: 10px;"
              @click="searchProStatus"
              >查询协议适配状态</el-button
            >
            <el-button
              type="primary"
              style="padding: 0 10%"
              @click="searchGetStatus"
              >查询边缘网关状态</el-button
            >
          </div> -->
          <div class="res_status"
            style="
              width: 100%;
              height: 60px;
              margin-top: 10px;
              border-bottom: 1px solid #ccc;
              text-align: center;
            "
          >
            <div class="left">
              <span>协议适配状态</span>
              <el-tag
                class="custom-tag"
                style="width: 200px; background-color: #f5f7fa"
                >{{ status }}</el-tag
              >
            </div>

            <div class="right">
              <span>边缘网关状态</span>
              <el-tag
                class="custom-tag"
                style="width: 200px; background-color: #f5f7fa"
                >{{ status1 }}</el-tag
              >
            </div>
          </div>
<!--         <div class="status_lan">
          <el-divider content-position="left">状态栏</el-divider>
        </div> -->
        <div class="ok_or_not" style="position: fixed; bottom: 20px;right: 10px; ">
            <el-button type="primary" style="padding: 0 30px" @click="finish"
              >完成</el-button
            >
            <el-button style="padding: 0 30px" @click="cancel">取消</el-button>
          </div>
        </div>

    </el-drawer>
    <!-- 采集设置抽屉 -->
    <el-drawer
      v-model="drawer_2"
      title="采集设置"
      :direction="direction_2"
      :before-close="handleClose_2"
    >
      <el-divider content-position="left">参数配置</el-divider>
      <div class="line_2">
        <span class="period">采集周期</span>
        <span class="storeFormat">存储格式</span>
        <span class="period_s">
          <el-select v-model="period" style="width: 200px">
            <el-option
              v-for="item in period_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </span>
        <span class="storeFormat_s">
          <el-select v-model="storeFormat" style="width: 200px">
            <el-option
              v-for="item in storeFormat_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </span>
        <!-- <div class="storePath">
          <div>保存地址</div>
          <el-input
            v-model="storePath"
            style="max-width: 100%"
            class="input-with-select"
          >
            <template #append>
              <el-button @click="store_path">...</el-button>
            </template>
          </el-input>
        </div> -->
        <div
          class="set"
          style=" padding: 20px 0; margin-top: 20px"
        >
          <h3>远程kafka服务器设置</h3>
          <div style="margin-top: 20px">Bootstrap Servers</div>
          <el-input
            v-model="boot_server"
            style="width: 100%"
            placeholder="10.8.58.1:6443"
          />
          <div style="margin-top: 20px">Topics</div>
          <el-input v-model="topic" style="width: 100%" placeholder="topic-dataLake" />
          <div style="text-align: right;">
            <el-button type="primary" style="padding: 0 30px;margin-top: 30px">配置</el-button>
          </div>

          <div class="coll" style="width:100%;height:60px;line-height:60px">
            <el-button type="primary" style="width:60px;margin-top: 30px">采集</el-button>
            <el-input
              v-model="inputName"
              style="width: calc(100% - 80px);margin-left:10px;margin-top:27px"
              disabled
            />
          </div>

        </div>
        <!-- <div class="status_lan">
          <el-divider content-position="left">状态栏</el-divider>
        </div> -->
        <div
          class="btn_over_or_not"
          style="position: fixed; bottom: 20px;right: 10px; "
        >
          <el-button type="primary" style="padding: 0 30px" @click="finish_2"
            >完成</el-button
          >
          <el-button style="padding: 0 30px" @click="cancel_2">取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getDeviceData,addDeviceList,getDeviceList,modifyDeviceList,deleteDeviceInfo } from '@/api/DevConnection'
export default {
  name: "EquipmentAccess",
  data() {
    return {
      inputName:'',
      disabled__:false,
      collectionPath:'',
      equ_fit_num:0,
      ser_fit_num: 0,
      pro_fit_num:0,
      id: '',
      equipment: [
      // {
      //   deviceName:'整经机-012',
      //   state: 0,
      //   gatewayId:'1010'
      // },
      // {
      //   deviceName:'整经机-010',
      //   state: 1,
      //   gatewayId:'1011'
      // }
      ],
      service: [],
      production: [],
      dialogVisible: false,
      r_type: "",
      e_type: "",
      name: "",
      r_type_options: [
        {
          value: "设备",
          label: "设备"
        },
        {
          value: "产品",
          label: "产品"
        },
        {
          value: "服务",
          label: "服务"
        }
      ],
      e_type_options: [
        {
          value: "整经机",
          label: "整经机"
        },
        {
          value: "梭织机",
          label: "梭织机"
        },
        {
          value: "倍捻机",
          label: "倍捻机"
        },
        {
          value: "穿综机",
          label: "穿综机"
        },
        {
          value: "贴片机",
          label: "贴片机"
        }
      ],
      data: {
        r_type: "",
        e_type: "",
        e_name: "",
        selection: ""
      },
      tableData: [
        // {
        //   r_type_: "",
        //   e_type_: "",
        //   e_name_: "",
        //   selection_: ""
        // }
      ],
      drawer: false,
      drawer_2: false,
      direction: "rtl",
      direction_2: "rtl",
      port: "",
      port_options: [
      /*
        {
          value: "0",
          label: "RS485"
        },
        {
          value: "1",
          label: "CAN"
        },
        {
          value: "2",
          label: "NB-IOT"
        },
        {
          value: "3",
          label: "LoRa"
        },
        {
          value: "4",
          label: "5G"
        },
        {
          value: "5",
          label: "4G"
        },
        {
          value: "6",
          label: "CAT1"
        },
        {
          value: "7",
          label: "WIFI"
        }, */
        {
          value: "7",
          label: "无接口"
        },
        {
          value: "8",
          label: "RJ45_1"
        },
        {
          value: "9",
          label: "RJ45_2"
        },
      ],
      port_1: "",
      port_1_options: [],
      protocol_1: "",
      protocol_1_options: [],
      protocol: "",
      protocol_options: [
      {
          value: "",
          label: ""
        },
        {
          value: "MODBUS",
          label: "MODBUS"
        },
        {
          value: "MODBUS",
          label: "MODBUS"
        }
      ],
      RSbaud: "",
      RSbaud_options: [
        {
          value: "4800",
          label: "4800"
        },
        {
          value: "9600",
          label: "9600"
        },
        {
          value: "14400",
          label: "14400"
        },
        {
          value: "19200",
          label: "19200"
        }
        ,
        {
          value: "38400",
          label: "38400"
        },
        {
          value: "56000",
          label: "56000"
        },
        {
          value: "57600",
          label: "57600"
        },
        {
          value: "115200",
          label: "115200"
        },
        {
          value: "128000",
          label: "128000"
        },
        {
          value: "230400",
          label: "230400"
        },
        {
          value: "256000",
          label: "256000"
        },
      ],
      RSdataBit: "",
      RSdataBit_options: [
      {
          value: "5",
          label: "5"
        },
        {
          value: "6",
          label: "6"
        },
        {
          value: "7",
          label: "7"
        },
        {
          value: "8",
          label: "8"
        }
      ],
      RSstopBit: "",
      RSstopBit_options: [
        {
          value: "1",
          label: "1"
        },
        {
          value: "1.5",
          label: "1.5"
        },
        {
          value: "2",
          label: "2"
        }
      ],
      RSschool: "",
      RSschool_options: [
        {
          value: "None",
          label: "None"
        },
        {
          value: "Odd",
          label: "Odd"
        },
        {
          value: "Even",
          label: "Even"
        },
        {
          value: "Mark",
          label: "Mark"
        },
        {
          value: "Space",
          label: "Space"
        },
      ],
      CANbaud: "",
      CANbaud_options:  [
        {
          value: "4800",
          label: "4800"
        },
        {
          value: "9600",
          label: "9600"
        },
        {
          value: "14400",
          label: "14400"
        },
        {
          value: "19200",
          label: "19200"
        }
        ,
        {
          value: "38400",
          label: "38400"
        },
        {
          value: "56000",
          label: "56000"
        },
        {
          value: "57600",
          label: "57600"
        },
        {
          value: "115200",
          label: "115200"
        },
        {
          value: "128000",
          label: "128000"
        },
        {
          value: "230400",
          label: "230400"
        },
        {
          value: "256000",
          label: "256000"
        },
      ],
      CANZformat: "",
      CANZformat_options: [
        {
          value: "6",
          label: "标准帧"
        },
        {
          value: "7",
          label: "扩展帧"
        },

      ],
      CANZtype: "",
      CANZtype_options: [
        {
          value: "1",
          label: "数据帧"
        },
        {
          value: "2",
          label: "遥控帧"
        },

      ],
      CANZid: "",
      CANZid_options: [
        {
          value: "None",
          label: "None"
        },
        {
          value: "Odd",
          label: "Odd"
        },
        {
          value: "Even",
          label: "Even"
        },
        {
          value: "Mark",
          label: "Mark"
        }
      ],
      m_type: "",
      m_type_options: [
        {
          value: "coil",
          label: "coil"
        },
        {
          value: "register",
          label: "register"
        }
      ],
      // m_type1: "",
      // m_type1_options: [
      //   {
      //     value: "coil",
      //     label: "coil"
      //   },
      //   {
      //     value: "register",
      //     label: "register"
      //   }
      // ],
      // m_type2: "",
      // m_type2_options: [
      //   {
      //     value: "coil",
      //     label: "coil"
      //   },
      //   {
      //     value: "register",
      //     label: "register"
      //   }
      // ],
      // m_type3: "",
      // m_type3_options: [
      //   {
      //     value: "coil",
      //     label: "coil"
      //   },
      //   {
      //     value: "register",
      //     label: "register"
      //   }
      // ],
      // m_type4: "",
      // m_type4_options: [
      //   {
      //     value: "coil",
      //     label: "coil"
      //   },
      //   {
      //     value: "register",
      //     label: "register"
      //   }
      // ],
      // m_type5: "",
      // m_type5_options: [
      //   {
      //     value: "coil",
      //     label: "coil"
      //   },
      //   {
      //     value: "register",
      //     label: "register"
      //   }
      // ],
      // m_type6: "",
      // m_type6_options: [
      //   {
      //     value: "coil",
      //     label: "coil"
      //   },
      //   {
      //     value: "register",
      //     label: "register"
      //   }
      // ],
      // m_type7: "",
      // m_type7_options: [
      //   {
      //     value: "coil",
      //     label: "coil"
      //   },
      //   {
      //     value: "register",
      //     label: "register"
      //   }
      // ],
      // m_type8: "",
      // m_type8_options: [
      //   {
      //     value: "coil",
      //     label: "coil"
      //   },
      //   {
      //     value: "register",
      //     label: "register"
      //   }
      // ],
      // m_type9: "",
      // m_type9_options: [
      //   {
      //     value: "coil",
      //     label: "coil"
      //   },
      //   {
      //     value: "register",
      //     label: "register"
      //   }
      // ],
      addr: "",
      addr_options: [
        {
          value: "3200",
          label: "3200"
        }
      ],
      num: "",
      num_options: [
        {
          value: "80",
          label: "80"
        }
      ],
      tableData_m: [],
      selectedRows: [],
      tableData_m1: [],
      tableData_m2: [],
      tableData_m3: [],
      tableData_m4: [],
      tableData_m5: [],
      tableData_m6: [],
      tableData_m7: [],
      tableData_m8: [],
      tableData_m9: [],
      compileRate: 0,
      issueRate: 0,
      p_status: "",
      g_status: "",
      period: "",
      period_options: [
        {
          value: "200ms",
          label: "200ms"
        },{
          value: "300ms",
          label: "300ms"
        },{
          value: "400ms",
          label: "400ms"
        },{
          value: "500ms",
          label: "500ms"
        },
      ],
      storeFormat: "",
      storeFormat_options: [
        {
          value: "Json",
          label: "Json"
        },
        {
          value: "CVS",
          label: "CVS"
        },
        {
          value: "XML",
          label: "XML"
        },
        {
          value: "日志",
          label: "日志"
        }
      ],
      storePath: "",
      boot_server: "",
      topic: "",
      getway_id: "",
      getway_id_options: [
        {
          value: "1",
          label: "Modbus RTU"
        },
        {
          value: "2",
          label: "MQTT"
        },
        {
          value: "3",
          label: "Modbus TCP"
        },
        {
          value: "4",
          label: "MQTT_SN"
        },
        {
          value: "5",
          label: "OPC UA "
        },
        {
          value: "6",
          label: "HTTP"
        },
        {
          value: "7",
          label: "HTTPS"
        },
        {
          value: "8",
          label: "PLC(485)"
        },
        {
          value: "9",
          label: "CAN(Modbus)"
        },
        {
          value: "10",
          label: "NB-IOT(Modbus)"
        },
        {
          value: "11",
          label: "NB-IOT(MQTT)"
        },
        {
          value: "12",
          label: "LoRa(Modbus)"
        },
        {
          value: "13",
          label: "LoRa(MQTT)"
        },
        {
          value: "14",
          label: "5G(Modbus)"
        },
        {
          value: "15",
          label: "5G(MQTT)"
        },
        {
          value: "16",
          label: "4G(Modbus)"
        },
        {
          value: "17",
          label: "4G(MQTT)"
        },
        {
          value: "18",
          label: "CAT1(Modbus)"
        },
        {
          value: "19",
          label: "CAT1(MQTT)"
        },
        {
          value: "20",
          label: "WIFI(Modbus)"
        },
        {
          value: "21",
          label: "WIFI(MQTT)"
        },
        {
          value: "22",
          label: "OPC DA"
        },
        {
          value: "23",
          label: "ODBC"
        },
        {
          value: "24",
          label: "JDBC"
        },
        {
          value: "25",
          label: "RESP"
        },
        {
          value: "26",
          label: "Thrift"
        },
        {
          value: "27",
          label: "Hadoop RPC"
        },
        {
          value: "28",
          label: "MongonDB Wire Protocol"
        },
        {
          value: "29",
          label: "FTP"
        },
      ],
      qos: "",
      qos_options: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
        {
          value: "2",
          label: "2"
        },
      ],
      cls: "",
      cls_options: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
      ],
      qos1: "",
      qos1_options: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
        {
          value: "2",
          label: "2"
        },
      ],
      cls1: "",
      cls1_options: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
      ],
      qos2: "",
      qos2_options: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
        {
          value: "2",
          label: "2"
        },
      ],
      cls2: "",
      cls2_options: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
      ],
      qos3: "",
      qos3_options: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
        {
          value: "2",
          label: "2"
        },
      ],
      cls3: "",
      cls3_options: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
      ],
      qos4: "",
      qos4_options: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
        {
          value: "2",
          label: "2"
        },
      ],
      cls4: "",
      cls4_options: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
      ],
      qos5: "",
      qos5_options: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
        {
          value: "2",
          label: "2"
        },
      ],
      cls5: "",
      cls5_options: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
      ],
      qos6: "",
      qos6_options: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
        {
          value: "2",
          label: "2"
        },
      ],
      cls6: "",
      cls6_options: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
      ],
      qos7: "",
      qos7_options: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
        {
          value: "2",
          label: "2"
        },
      ],
      cls7: "",
      cls7_options: [
        {
          value: "0",
          label: "0"
        },
        {
          value: "1",
          label: "1"
        },
      ],
      securityPolicy: "",
      securityPolicy_options: [
      {
          value: "1",
          label: "None"
        },
        {
          value: "2",
          label: "Basic256sha256"
        },
      ],
      securityPolicy1: "",
      securityPolicy1_options: [
      {
          value: "1",
          label: "None"
        },
        {
          value: "2",
          label: "Basic256sha256"
        },
      ],
      dataReading: "",
      dataReading_options: [
      {
          value: "1",
          label: "GET"
        },
        {
          value: "2",
          label: "POST"
        },
        {
          value: "3",
          label: "PUT"
        },{
          value: "4",
          label: "DELETE"
        },
      ],
      dataReading1: "",
      dataReading1_options: [
        {
          value: "1",
          label: "GET"
        },
        {
          value: "2",
          label: "POST"
        },
        {
          value: "3",
          label: "PUT"
        },{
          value: "4",
          label: "DELETE"
        },
      ],
      timeout: "",
      timeout_options: [
      {
          value: "1",
          label: "30s"
        },
        {
          value: "2",
          label: "45s"
        },{
          value: "3",
          label: "60s"
        },
      ],
      timeout1: "",
      timeout1_options: [
      {
          value: "1",
          label: "30s"
        },
        {
          value: "2",
          label: "45s"
        },{
          value: "3",
          label: "60s"
        },
      ],
      addr1:"",
      num1: "",
      addr2:"",
      num2: "",
      addr3:"",
      num3: "",
      addr4:"",
      num4: "",
      addr5:"",
      num5: "",
      addr6:"",
      num6:"",
      addr7:"",
      num7: "",
      addr8:"",
      num8: "",
      addr9:"",
      num9: "",
      addr10:"",
      num10:"",
      tar_addr: "",
      tar_port: "",
      device_account: "",
      decive_pwd: "",
      clientId: "",
      sub_topic: "",
      issue_topic: "",
      tar_addr1: "",
      tar_port1: "",
      device_account1: "",
      decive_pwd1: "",
      clientId1: "",
      sub_topic1: "",
      issue_topic1: "",
      tar_addr2: "",
      tar_port2: "",
      device_account2: "",
      decive_pwd2: "",
      clientId2: "",
      sub_topic2: "",
      issue_topic2: "",
      tar_addr3: "",
      tar_port3: "",
      device_account3: "",
      decive_pwd3: "",
      clientId3: "",
      sub_topic3: "",
      issue_topic3: "",
      tar_addr4: "",
      tar_port4: "",
      device_account4: "",
      decive_pwd4: "",
      clientId4: "",
      sub_topic4: "",
      issue_topic4: "",
      tar_addr5: "",
      tar_port5: "",
      device_account5: "",
      decive_pwd5: "",
      clientId5: "",
      sub_topic5: "",
      issue_topic5: "",
      tar_addr6: "",
      tar_port6: "",
      device_account6: "",
      decive_pwd6: "",
      clientId6: "",
      sub_topic6: "",
      issue_topic6: "",
      tar_addr7: "",
      tar_port7: "",
      device_account7: "",
      decive_pwd7: "",
      clientId7: "",
      sub_topic7: "",
      issue_topic7: "",
      selectedCell: null, // 添加一个用来存储选中cell信息的变量
      status: "",
      status1: "",
      status2: "",
      status3: "",
      tableData: [] ,// 表格数据
      drawer: false,
      NetId: "",
      slaveAddress1: "",
      // slaveAddress2: "",
      slaveip: "",
      slaveip1: "",
      slaveip2: "",
      slaveip3: "",
      slaveip4: "",
      slaveip5: "",
      slaveip6: "",
      slaveip7: "",
      slaveip8: "",
      slaveip9: "",
      URL: "",
      // URL1: "",
      // URL2: "",
      // URL3: "",
      password: "",
      // password1: "",
      portid: "",
      portid1: "",
      portid2: "",
      portid3: "",
      portid4: "",
      portid5: "",
      portid6: "",
      portid7: "",
      portid8: "",
      portid9: "",
      portid10: "",
      portid11: "",
      WIFIid: "",
      WIFIid1: "",
      WIFIpassword: "",
      WIFIpassword1: "",
      resourceSelected: [],
      pageData:{
        size: 10,
        page: 1,
        total: 0
      },
      c_disabled:true,
      i_disabled:true,
      //协议配置参数
      finish_data_1: {
        id:0,
        deviceType:'',
        deviceName: '', // 设备名称
        deviceDescription: '', // 设备描述
        state: '', // 0:未适配，1：已适配
        gatewayId: '', // 网关Id
        createUser: '', // 创建人
        updateUser: '', // 修改人
        isDeleted: '', // 0：未删除，1：已删除
        connector: '', // 端口
        protocol: '', // 协议
        passiveAddress: '', // 从站地址
        passiveIp: '', // 从站ip
        passivePort: '', // 端口号
        protocolType: '', // 协议类型
        protocolAddress: '', // 协议地址
        protocolNumber: '', // 协议数量
        targetAddress: '', // 目标地址
        targetPort: '', // 目标端口
        deviceAccount: '', // 设备账户
        devicePassword: '', // 设备密码
        clientId: '', // ClientID
        subscribeTopic: '', // 订阅主题
        releaseTopic: '', // 发布主题
        qos: '', // QOS
        clearSession: '', // 清理会话状态
        url: '', // URL
        securityPolicy: '', // 安全策略
        nodePath: '', // 节点路径
        certificates: '', // 证书和密钥
        readingMethod: '', // 数据读取方法
        timeoutSetting: '', // 超时设置
        baudRate: '', // 波特率
        dataBit: '', // 数据位
        stopBit: '', // 停止位
        verify: '', // 校验
        frameFormat: '', // 帧格式
        frameType: '', // 帧类型
        frameId: '', // 帧ID
        wifiAccount: '', // WIFI账号
        wifiPassword: '', // WIFI密码
        isSelected: 0, // 是否选中
      },
      compile_timer:0,//编译定时器
      issue_timer:0,//下发定时器
      equipmentSelected:'',
      productionSelected:'',
      serviceSelected: '',
      dev_name:'' ,
      deviceType:'',
    };
  },
  created() {
  // 设置默认选项
  },
  mounted() {
    // 监听页面点击事件
    document.addEventListener('click', this.handlePageClick);
    // 获取设备产品服务各个列表
    this.getList();
  },
  beforeUnmount() {    // 移除页面点击事件监听器
    document.removeEventListener('click', this.handlePageClick);
  },
  methods: {
    ProtocolChange() {
      this.tableData_m = [];
    },
    collectionPathHandleChange(file) {
      this.collectionPath = file.name
    },
    //获取适配数据
    getE_S_P_num() {
      this.equ_fit_num = 0
      this.ser_fit_num = 0
      this.pro_fit_num = 0
      for (var i = 0; i < this.equipment.length; i++){
        if(this.equipment[i].state === 1){
          this.equ_fit_num++;
        }
      }
      for(var i=0;i<this.service.length;i++){
        if(this.service[i].state === 1){
          this.ser_fit_num++;
        }
      }
      for(var i=0;i<this.production.length;i++){
        if(this.production[i].state ===1){
          this.pro_fit_num++;
        }
      }
    },
    // 获取设备产品服务列表
    getList() {
      getDeviceList().then(res => {
        console.log('----------list',res)
        if (res.status === 200) {
          this.equipment = []
          this.service = []
          this.production=[]
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].deviceType === '设备' /*&& res.data[i].isDeleted === 0*/) {
              this.equipment.push(res.data[i])
            } else if (res.data[i].deviceType === '服务' /*&& res.data[i].isDeleted === 0*/) {
              this.service.push(res.data[i])
            } else if (res.data[i].deviceType === '产品' /*&& res.data[i].isDeleted === 0*/) {
              this.production.push(res.data[i])
            }
          }
        }
        this.getE_S_P_num();//获取适配个数
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取资源类型列表
    getResourceList() {
      getDeviceData({
        deviceType: this.r_type ? this.r_type : 'null',
        deviceName: this.name ? this.name : 'null'
      }).then(res => {
        this.tableData = res.data;
      }).catch(err => {
        console.log(err)
      });
    },
    // 资源类型列表多选
    resourceSelectionChange(e) {
      this.resourceSelected = e;
    },
    //添加按钮
    Add() {
      this.dialogVisible = true;
      // 获取资源类型列表
      this.getResourceList()
    },
    deleteEquipment(item) {
      // 在这里编写删除设备的逻辑，例如从 equipment 数组中删除对应的 item
      // 例如：
      // const index = this.equipment.indexOf(item);
      // if (index !== -1) {
      //   this.equipment.splice(index, 1); // 从数组中删除该设备信息
      // }
      const obj = {id:item.id}
      var d_id = JSON.stringify(obj);
      deleteDeviceInfo(d_id).then(res => {
        if (res.status === 200) {
          this.getList();
        }
      })
    },
    handlePageClick(event) {
      // 获取点击的元素
      const clickedElement = event.target;
      // 检查点击的元素是否在设备、产品或服务区域内
      const isClickedInEquipmentArea = clickedElement.closest('.cell');
      const isClickedInProductionArea = clickedElement.closest('.cell');
      const isClickedInServiceArea = clickedElement.closest('.cell');
      const isClickedInProtocolConfigButton = clickedElement.closest('.protocol-config-button');
      const isClickedInAcquSettingButton = clickedElement.closest('.acqu-setting-button');
      // 如果点击的不在这些区域内，则取消所有的选中状态
      if (!isClickedInEquipmentArea && !isClickedInProductionArea && !isClickedInServiceArea &&
        !isClickedInProtocolConfigButton && !isClickedInAcquSettingButton) {
        this.clearSelection();
      }
    },
    clearSelection() {
      // 取消设备、产品和服务的选中状态
      this.equipment.forEach(item => {
        item.selected = false;
      });
      this.production.forEach(item => {
        item.selected = false;
      });
      this.service.forEach(item => {
        item.selected = false;
      });
    },
    EquipmentSelected(selectedItem) {
      if (selectedItem.state === 0) {
        this.disabled__ = true
      }
      else {
        this.disabled__ = false
      }
      //console.log('123456e',selectedItem)
      this.id = selectedItem.id
      this.deviceType = selectedItem.deviceType
      this.dev_name = selectedItem.deviceName
      this.NetId= selectedItem.gatewayId
      this.port = selectedItem.connector
      this.getway_id = selectedItem.protocol
      this.slaveAddress1 = selectedItem.passiveAddress
      this.slaveip = selectedItem.passiveIp
      this.portid = selectedItem.passivePort
      this.m_type  =  selectedItem.protocolType
      this.addr =  selectedItem.protocolAddress
      this.num = selectedItem.protocolNumber
      this.tar_addr = selectedItem.targetAddress
      this.tar_port = selectedItem.targetPort
      this.device_account = selectedItem.deviceAccount
      this.device_pwd = selectedItem.devicePassword
      this.clientId = selectedItem.clientId
      this.sub_topic = selectedItem.subscribeTopic
      this.issue_topic = selectedItem.releaseTopic
      this.qos = selectedItem.qos
      this.cls = selectedItem.clearSession
      this.URL = selectedItem.url
      this.securityPolicy = selectedItem.securityPolicy
      this.file = selectedItem.nodePath
      this.password = selectedItem.certificates
      this.dataReading = selectedItem.readingMethod
      this.timeout = selectedItem.timeoutSetting
      this.RSbaud =selectedItem.baudRate
      this.RSdataBit = selectedItem.dataBit
      this.RSstopBit = selectedItem.stopBit
      this.RSschool = selectedItem.verify
      this.CANZformat = selectedItem.frameFormat
      this.CANZtype =  selectedItem.frameType
      this.CANZid = selectedItem.frameId
      this.WIFIid = selectedItem.wifiAccount
      this.WIFIpassword = selectedItem.wifiPassword
      this.equipment.forEach(item => {
        if (item === selectedItem) {
          item.selected = !item.selected; // 切换选中状态
        } else {
          item.selected = false; // 取消其他设备的选中状态
        }
      });

       // 取消其他类型的选中状态
       this.production.forEach(item => {
         item.selected = false;
       });
       this.service.forEach(item => {
         item.selected = false;
       });
    },
    ProductionSelected(selectedItem) {
      if (selectedItem.state === 0) {
        this.disabled__ = true
      }
      else {
        this.disabled__ = false
      }
      //console.log('123456p',selectedItem)
      this.id = selectedItem.id
      this.deviceType = selectedItem.deviceType
      this.dev_name = selectedItem.deviceName
      this.NetId= selectedItem.gatewayId
      this.port = selectedItem.connector
      this.getway_id = selectedItem.protocol
      this.slaveAddress1 = selectedItem.passiveAddress
      this.slaveip = selectedItem.passiveIp
      this.portid = selectedItem.passivePort
      this.m_type  =  selectedItem.protocolType
      this.addr =  selectedItem.protocolAddress
      this.num = selectedItem.protocolNumber
      this.tar_addr = selectedItem.targetAddress
      this.tar_port = selectedItem.targetPort
      this.device_account = selectedItem.deviceAccount
      this.device_pwd = selectedItem.devicePassword
      this.clientId = selectedItem.clientId
      this.sub_topic = selectedItem.subscribeTopic
      this.issue_topic = selectedItem.releaseTopic
      this.qos = selectedItem.qos
      this.cls = selectedItem.clearSession
      this.URL = selectedItem.url
      this.securityPolicy = selectedItem.securityPolicy
      this.file = selectedItem.nodePath
      this.password = selectedItem.certificates
      this.dataReading = selectedItem.readingMethod
      this.timeout = selectedItem.timeoutSetting
      this.RSbaud =selectedItem.baudRate
      this.RSdataBit = selectedItem.dataBit
      this.RSstopBit = selectedItem.stopBit
      this.RSschool = selectedItem.verify
      this.CANZformat = selectedItem.frameFormat
      this.CANZtype =  selectedItem.frameType
      this.CANZid = selectedItem.frameId
      this.WIFIid = selectedItem.wifiAccount
      this.WIFIpassword = selectedItem.wifiPassword

      this.production.forEach(item => {
        if (item === selectedItem) {
          item.selected = !item.selected; // 切换选中状态
        } else {
          item.selected = false; // 取消其他产品的选中状态
        }
      });
      // 取消其他类型的选中状态
      this.equipment.forEach(item => {
         item.selected = false;
       });
       this.service.forEach(item => {
         item.selected = false;
       });
    },
    ServiceSelected(selectedItem) {
      if (selectedItem.state === 0) {
        this.disabled__ = true
      }
      else {
        this.disabled__ = false
      }
      //console.log('123456s',selectedItem)
      this.id = selectedItem.id
      this.deviceType = selectedItem.deviceType
      this.dev_name = selectedItem.deviceName
      this.NetId= selectedItem.gatewayId
      this.port = selectedItem.connector
      this.getway_id = selectedItem.protocol
      this.slaveAddress1 = selectedItem.passiveAddress
      this.slaveip = selectedItem.passiveIp
      this.portid = selectedItem.passivePort
      this.m_type  =  selectedItem.protocolType
      this.addr =  selectedItem.protocolAddress
      this.num = selectedItem.protocolNumber
      this.tar_addr = selectedItem.targetAddress
      this.tar_port = selectedItem.targetPort
      this.device_account = selectedItem.deviceAccount
      this.device_pwd = selectedItem.devicePassword
      this.clientId = selectedItem.clientId
      this.sub_topic = selectedItem.subscribeTopic
      this.issue_topic = selectedItem.releaseTopic
      this.qos = selectedItem.qos
      this.cls = selectedItem.clearSession
      this.URL = selectedItem.url
      this.securityPolicy = selectedItem.securityPolicy
      this.file = selectedItem.nodePath
      this.password = selectedItem.certificates
      this.dataReading = selectedItem.readingMethod
      this.timeout = selectedItem.timeoutSetting
      this.RSbaud =selectedItem.baudRate
      this.RSdataBit = selectedItem.dataBit
      this.RSstopBit = selectedItem.stopBit
      this.RSschool = selectedItem.verify
      this.CANZformat = selectedItem.frameFormat
      this.CANZtype =  selectedItem.frameType
      this.CANZid = selectedItem.frameId
      this.WIFIid = selectedItem.wifiAccount
      this.WIFIpassword = selectedItem.wifiPassword

      this.service.forEach(item => {
        if (item === selectedItem) {
          item.selected = !item.selected; // 切换选中状态
        } else {
          item.selected = false; // 取消其他服务的选中状态
        }
      });
      // 取消其他类型的选中状态
      this.equipment.forEach(item => {
         item.selected = false;
       });
       this.production.forEach(item => {
         item.selected = false;
       });
    },
    // EquipmentSelected(selectedItem) {
    //   this.dev_name = selectedItem.device_name
    //   this.equipmentSelected = selectedItem
    //   this.NetId = selectedItem.e_id
    //   this.id = selectedItem.id
    //   this.equipment.forEach(item => {
    //     if (item === selectedItem) {
    //       item.selected = !item.selected; // 切换选中状态
    //     } else {
    //       item.selected = false; // 取消其他设备的选中状态
    //     }
    //   });
    //   // 取消其他类型的选中状态
    //   this.production.forEach(item => {
    //     item.selected = false;
    //   });
    //   this.service.forEach(item => {
    //     item.selected = false;
    //   });

    // },
    // ProductionSelected(selectedItem) {
    //   this.NetId = selectedItem.e_id
    //   this.id = selectedItem.id
    //   this.dev_name = selectedItem.device_name
    //   this.production.forEach(item => {
    //     if (item === selectedItem) {
    //       item.selected = !item.selected; // 切换选中状态
    //     } else {
    //       item.selected = false; // 取消其他产品的选中状态
    //     }
    //   });
    //   // 取消其他类型的选中状态
    //   this.equipment.forEach(item => {
    //     item.selected = false;
    //   });
    //   this.service.forEach(item => {
    //     item.selected = false;
    //   });
    // },
    // ServiceSelected(selectedItem) {
    //   this.NetId = selectedItem.e_id
    //   this.id = selectedItem.id
    //   this.dev_name = selectedItem.device_name
    //   this.service.forEach(item => {
    //     if (item === selectedItem) {
    //       item.selected = !item.selected; // 切换选中状态
    //     } else {
    //       item.selected = false; // 取消其他服务的选中状态
    //     }
    //   });
    //   // 取消其他类型的选中状态
    //   this.equipment.forEach(item => {
    //     item.selected = false;
    //   });
    //   this.production.forEach(item => {
    //     item.selected = false;
    //   });
    // },

    deleteProduction(item) {
      // const index = this.production.indexOf(item);
      // if (index !== -1) {
      //   this.production.splice(index, 1); // 从数组中删除该设备信息
      // }
      const obj = {id:item.id}
      var d_id = JSON.stringify(obj);
      deleteDeviceInfo(d_id).then(res => {
        if (res.status === 200) {
          this.getList();
        }
      })
    },
    deleteService(item) {
      // 在这里编写删除设备的逻辑，例如从 equipment 数组中删除对应的 item
      // 例如：
      // const index = this.service.indexOf(item);
      // if (index !== -1) {
      //   this.service.splice(index, 1); // 从数组中删除该设备信息
      // }
      const obj = {id:item.id}
      var d_id = JSON.stringify(obj);
      deleteDeviceInfo(d_id).then(res => {
        if (res.status === 200) {
          this.getList();
        }
      })
    },
    //弹窗确认按钮
    addData() {
      if (!this.name || !this.r_type || !this.e_type) {
        // 如果有任何一个为空，则不执行添加操作
        return;
      }
      // 获取填写的资源类型、设备类型和设备名称
      const newData = {
        r_type_: this.r_type,
        e_type_: this.e_type,
        e_name_: this.name,
        selection_: "false", // 默认选择状态为 false
        is_add: false,
      };

      // 将获取到的数据添加到表格数据中
      this.tableData.push(newData);

      // 关闭弹窗

      // 清空表单数据
      this.r_type = "";
      this.e_type = "";
      this.name = "";
    },
    AddSure() {
      if (this.resourceSelected.length > 0) {
        let arr = []
        for (let i = 0; i < this.resourceSelected.length; i++) {
          arr.push({
            id: this.resourceSelected[i].id
          })
        }
        addDeviceList(arr).then(res => {
          // 关闭弹窗
          this.dialogVisible = false;
          this.getList();
        }).catch(err => {
          console.log(err);
        })
      }
      // // 遍历选中的行，将数据添加到对应的类中
      // this.tableData.forEach(row => {
      //   if (row.selection_ === "true" && row.is_add === false) {
      //     if (row.r_type_ === "设备") {
      //       // 添加到设备类
      //       this.equipment.push({
      //         e_type: row.e_type_,
      //         e_name: row.e_name_,
      //         e_status: "未适配", // 设置默认状态为未适配
      //         e_id: "" // 示例设备 ID
      //       });
      //     } else if (row.r_type_ === "产品") {
      //       // 添加到产品类
      //       this.production.push({
      //         e_type: row.e_type_,
      //         e_name: row.e_name_,
      //         e_status: "未适配", // 设置默认状态为未适配
      //         e_id: "" // 示例产品 ID
      //       });
      //     } else if (row.r_type_ === "服务") {
      //       // 添加到服务类
      //       this.service.push({
      //         e_type: row.e_type_,
      //         e_name: row.e_name_,
      //         e_status: "未适配", // 设置默认状态为未适配
      //         e_id: "" // 示例服务 ID
      //       });
      //     }
      //     row.is_add = true
      //   }
      // });

      // // 清空表单数据
      // this.r_type = "";
      // this.e_type = "";
      // this.name = "";
    },
    dialogCancel() {
      // 清空表格数据
      this.tableData = [];
      // 关闭弹窗
      this.dialogVisible = false;
      this.r_type = "";
      this.e_type = "";
      this.name = "";
    },
    //删除按钮
    dele() { },
    protocolConfig() {
      if (!this.equipment.some(item => item.selected) && !this.production.some(item => item.selected) && !this.service.some(item => item.selected)) {
        this.$message({
          message: '请先选择需要配置的资源',
          type: 'warning'
        });
        return;
      }
      if (this.equipment.some(item => item.selected)) {
        const selectedEquipment = this.equipment.find(item => item.selected);
        console.log(`被选中的设备名称：${selectedEquipment.e_name}`);
        this.drawer = true;
      } else {
        console.log("没有设备被选中");
      }
      if (this.production.some(item => item.selected)) {
        const selectedProduction = this.production.find(item => item.selected);
        console.log(`被选中的设备名称：${selectedProduction.e_name}`);
        this.drawer = true;
      } else {
        console.log("没有设备被选中");
      }
      if (this.service.some(item => item.selected)) {
        const selectedService = this.service.find(item => item.selected);
        console.log(`被选中的设备名称：${selectedService.e_name}`);
        this.drawer = true;
      } else {
        console.log("没有设备被选中");
      }
    },

    acquSetting() {
      this.inputName = "采集" + this.dev_name + "数据，保存于本地"+ this.dev_name +"文件夹"
      if (this.equipment.some(item => item.selected && item.e_status === '未适配')) {
        this.$message({
          message: '请先完成协议适配',
          type: 'warning'
        });
        return; // 停止执行后续逻辑
      }
      if (!this.equipment.some(item => item.selected) && !this.production.some(item => item.selected) && !this.service.some(item => item.selected)) {
        this.$message({
          message: '请先选择需要配置的资源',
          type: 'warning'
        });
        return; // 停止执行后续逻辑
      }
      if (this.equipment.some(item => item.selected)) {
        const selectedEquipment = this.equipment.find(item => item.selected);
        console.log(`被选中的设备名称：${selectedEquipment.e_name}`);
        this.drawer_2 = true;
      } else {
        console.log("没有设备被选中");
      }
      if (this.production.some(item => item.selected)) {
        const selectedProduction = this.production.find(item => item.selected);
        console.log(`被选中的设备名称：${selectedProduction.e_name}`);
        this.drawer_2 = true;
      } else {
        console.log("没有设备被选中");
      }
      if (this.service.some(item => item.selected)) {
        const selectedService = this.service.find(item => item.selected);
        console.log(`被选中的设备名称：${selectedService.e_name}`);
        this.drawer_2 = true;
      } else {
        console.log("没有设备被选中");
      }
    },
    update() { },
    search() { },
    changeStyle() { },
    handleClose_dialog() {
      this.dialogVisible = false;
    },
    handleClose() {
      // 重置数据
      this.NetId = '';
      this.port = '';
      this.getway_id = '';
      this.baud = '';
      this.dataBit = '';
      this.stopBit = '';
      this.school = '';
      // 其他数据重置...
      // 关闭抽屉
      this.drawer = false;
    },
    handleClose(done) {
      // 在这里重置所有数据
      this.NetId = ''; // 例如，将 NetId 置为空字符串
      this.port = ''; // 重置其他数据...
      this.getway_id = '';
      this.baud = '';
      this.dataBit = '';
      this.stopBit = '';
      this.school = '';
      // 重置其他数据...

      done(); // 调用 done() 方法关闭抽屉
    },
    handleClose_2() {
      this.drawer_2 = false;
    },
    addToTable() {
        // 检查输入数据是否为空
        if (this.m_type.trim() !== '' && this.addr.trim() !== '' && this.num.trim() !== '') {
          // 创建包含 m_type、addr 和 num 的对象
          const newData = {
            type_m: this.m_type,
            addr_m: this.addr,
            num_m: this.num,
            selected:false
          };

          // 将新数据推入 tableData_m 数组
          this.tableData_m.push(newData);
          // 清空 m_type、addr 和 num
          this.m_type = '';
          this.addr = '';
          this.num = '';
        }
       else {
          // 提示用户输入数据不能为空
          // 这里可以使用 this.$message 或者其他适合你项目的提示方式
          console.log('输入数据不能为空');
        }
    },
    addToTable1() {
      if (this.m_type1.trim() !== '' && this.addr1.trim() !== '' && this.num1.trim() !== '') {
        const newData1 = {
          type_m1: this.m_type1,
          addr_m1: this.addr1,
          num_m1: this.num1,
          selected: false // 添加一个 selected 属性，默认值为 false
        };
        // 将新数据推入 tableData_m 数组
        this.tableData_m1.push(newData1);
        this.m_type1 = '';
        this.addr1 = '';
        this.num1 = '';
      }
     else {
      // 提示用户输入数据不能为空
      // 这里可以使用 this.$message 或者其他适合你项目的提示方式
      console.log('输入数据不能为空');
     }
    },
    addToTable2() {
      if (this.m_type2.trim() !== '' && this.addr2.trim() !== '' && this.num2.trim() !== '') {
     const newData2 = {
         type_m2: this.m_type2,
         addr_m2: this.addr2,
         num_m2: this.num2
       };
       // 将新数据推入 tableData_m 数组
      this.tableData_m2.push(newData2);
      this.m_type2 = '';
      this.addr2 = '';
      this.num2 = '';
    }
     else {
      // 提示用户输入数据不能为空
      // 这里可以使用 this.$message 或者其他适合你项目的提示方式
      console.log('输入数据不能为空');
     }
    },
    addToTable3() {
      if (this.m_type3.trim() !== '' && this.addr3.trim() !== '' && this.num3.trim() !== '') {

     const newData3 = {
         type_m3: this.m_type3,
         addr_m3: this.addr3,
         num_m3: this.num3
       };
       // 将新数据推入 tableData_m 数组
       this.tableData_m3.push(newData3);
       this.m_type3 = '';
       this.addr3 = '';
       this.num3 = '';
        }
     else {
      // 提示用户输入数据不能为空
      // 这里可以使用 this.$message 或者其他适合你项目的提示方式
      console.log('输入数据不能为空');
     }
    },
    addToTable4() {
      if (this.m_type4.trim() !== '' && this.addr4.trim() !== '' && this.num4.trim() !== '') {

        const newData4 = {
          type_m4: this.m_type4,
          addr_m4: this.addr4,
          num_m4: this.num4
        };
        // 将新数据推入 tableData_m 数组
        this.tableData_m4.push(newData4);
        this.m_type4 = '';
        this.addr4 = '';
        this.num4 = '';
      }
    else {
      // 提示用户输入数据不能为空
      // 这里可以使用 this.$message 或者其他适合你项目的提示方式
      console.log('输入数据不能为空');
     }
    },
    addToTable5() {
      if (this.m_type5.trim() !== '' && this.addr5.trim() !== '' && this.num5.trim() !== '') {

     const newData5 = {
         type_m5: this.m_type5,
         addr_m5: this.addr5,
         num_m5: this.num5
       };
       // 将新数据推入 tableData_m 数组
      this.tableData_m5.push(newData5);
      this.m_type5 = '';
      this.addr5 = '';
      this.num5 = '';
    }
    else {
      // 提示用户输入数据不能为空
      // 这里可以使用 this.$message 或者其他适合你项目的提示方式
      console.log('输入数据不能为空');
     }
    },
    addToTable6() {
      if (this.m_type6.trim() !== '' && this.addr6.trim() !== '' && this.num6.trim() !== '') {

     const newData6 = {
         type_m6: this.m_type6,
         addr_m6: this.addr6,
         num_m6: this.num6
       };
       // 将新数据推入 tableData_m 数组
      this.tableData_m6.push(newData6);
      this.m_type6 = '';
      this.addr6 = '';
      this.num6 = '';
     }
    else {
      // 提示用户输入数据不能为空
      // 这里可以使用 this.$message 或者其他适合你项目的提示方式
      console.log('输入数据不能为空');
     }
    },
    addToTable7() {
      if (this.m_type7.trim() !== '' && this.addr7.trim() !== '' && this.num7.trim() !== '') {

     const newData7 = {
         type_m7: this.m_type7,
         addr_m7: this.addr7,
         num_m7: this.num7
       };
       // 将新数据推入 tableData_m 数组
      this.tableData_m7.push(newData7);
      this.m_type7 = '';
      this.addr7 = '';
      this.num7 = '';
     }
    else {
      // 提示用户输入数据不能为空
      // 这里可以使用 this.$message 或者其他适合你项目的提示方式
      console.log('输入数据不能为空');
     }
    },
    addToTable8() {
      if (this.m_type8.trim() !== '' && this.addr8.trim() !== '' && this.num8.trim() !== '') {
     const newData8 = {
         type_m8: this.m_type8,
         addr_m8: this.addr8,
         num_m8: this.num8
       };
       // 将新数据推入 tableData_m 数组
      this.tableData_m8.push(newData8);
      this.m_type8 = '';
      this.addr8 = '';
      this.num8 = '';
    }
    else {
      // 提示用户输入数据不能为空
      // 这里可以使用 this.$message 或者其他适合你项目的提示方式
      console.log('输入数据不能为空');
     }
    },
    addToTable9() {
      if (this.m_type9.trim() !== '' && this.addr9.trim() !== '' && this.num9.trim() !== '') {

     const newData9 = {
         type_m9: this.m_type9,
         addr_m9: this.addr9,
         num_m9: this.num9
       };
       // 将新数据推入 tableData_m 数组
      this.tableData_m9.push(newData9);
      this.m_type9 = '';
      this.addr9 = '';
        this.num9 = '';
    }
    else {
      // 提示用户输入数据不能为空
      // 这里可以使用 this.$message 或者其他适合你项目的提示方式
      console.log('输入数据不能为空');
     }
    },
    //编译定时器
    startCompileTimer(){
      this.compile_timer = setInterval(()=>{
        this.status="编译中"
        if(this.compileRate < 100){
          this.compileRate++;
        }
        else {
          clearInterval(this.compile_timer);
          this.status="编译完成"
          this.i_disabled = false
        }
      },30)
    },
    startIssueTimer(){
      this.issue_timer = setInterval(()=>{
        this.status="下发中"
        if(this.issueRate < 100){
          this.issueRate++;
        }
        else {
          clearInterval(this.issue_timer);
          this.status="下发完成"
        }
      },30)

      setTimeout(() => {
        this.status="适配完成"
        this.status1="运行"
      }, 5000);
    },
    //编译
    compile(){
      this.startCompileTimer()
    },
    //下发
    issue(){
      this.startIssueTimer();
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    Deletem_table() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要删除的行');
        return;
      }
      // Remove selected rows from tableData_m
      this.tableData_m = this.tableData_m.filter(row => !this.selectedRows.includes(row));
      this.selectedRows = [];
    },
    Deletem_table1() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要删除的行');
        return;
      }
      // Remove selected rows from tableData_m
      this.tableData_m1 = this.tableData_m1.filter(row => !this.selectedRows.includes(row));
      this.selectedRows = [];
    },
    Deletem_table2() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要删除的行');
        return;
      }
      // Remove selected rows from tableData_m
      this.tableData_m2 = this.tableData_m2.filter(row => !this.selectedRows.includes(row));
      this.selectedRows = [];
    },
    Deletem_table3() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要删除的行');
        return;
      }
      // Remove selected rows from tableData_m
      this.tableData_m3 = this.tableData_m3.filter(row => !this.selectedRows.includes(row));
      this.selectedRows = [];
    },
    Deletem_table4() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要删除的行');
        return;
      }
      // Remove selected rows from tableData_m
      this.tableData_m4 = this.tableData_m4.filter(row => !this.selectedRows.includes(row));
      this.selectedRows = [];
    },
    Deletem_table5() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要删除的行');
        return;
      }
      // Remove selected rows from tableData_m
      this.tableData_m5 = this.tableData_m5.filter(row => !this.selectedRows.includes(row));
      this.selectedRows = [];
    },
    Deletem_table6() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要删除的行');
        return;
      }
      // Remove selected rows from tableData_m
      this.tableData_m6 = this.tableData_m6.filter(row => !this.selectedRows.includes(row));
      this.selectedRows = [];
    },
    Deletem_table7() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要删除的行');
        return;
      }
      // Remove selected rows from tableData_m
      this.tableData_m7 = this.tableData_m7.filter(row => !this.selectedRows.includes(row));
      this.selectedRows = [];
    },
    Deletem_table8() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要删除的行');
        return;
      }
      // Remove selected rows from tableData_m
      this.tableData_m8 = this.tableData_m8.filter(row => !this.selectedRows.includes(row));
      this.selectedRows = [];
    },
    Deletem_table9() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要删除的行');
        return;
      }
      // Remove selected rows from tableData_m
      this.tableData_m9 = this.tableData_m9.filter(row => !this.selectedRows.includes(row));
      this.selectedRows = [];
    },
    setting() {
      // for (let i = 0; i < this.equipment.length; i++) {
      //   if (this.id === this.equipment[i].id) {
      //     this.equipment[i].e_id = this.NetId;
      //   }
      // }
      // for (let i = 0; i < this.production.length; i++) {
      //   if (this.id === this.production[i].id) {
      //     this.production[i].e_id = this.NetId;
      //   }
      // }for (let i = 0; i < this.service.length; i++) {
      //   if (this.id === this.service[i].id) {
      //     this.service[i].e_id = this.NetId;
      //   }
      // }
      this.status = "配置中"
      this.status1 = "预运行"
      setTimeout(()=>{
        this.c_disabled = false
        this.status = "配置完成"
        this.status1 = "预运行"
      },2000)
    },
    searchProStatus() {
      // 模拟异步请求
      setTimeout(() => {
        // 假设从后端获取的状态为"已适配"
        const response = { status: "未适配" };
        // 更新状态
        this.status = response.status;
      }, 1000);
    },
    searchProStatus1() {
      // 模拟异步请求
      setTimeout(() => {
        // 假设从后端获取的状态为"已适配"
        const response = { status2: "未适配" };
        // 更新状态
        this.status2 = response.status2;
      }, 1000);
    },
    searchGetStatus() {
      setTimeout(() => {
        // 假设从后端获取的状态为"已适配"
        const response = { status1: "未适配" };
        // 更新状态
        this.status1 = response.status1;
      }, 1000);
    },
    searchGetStatus1() {
      setTimeout(() => {
        // 假设从后端获取的状态为"已适配"
        const response = { status3: "未适配" };
        // 更新状态
        this.status3 = response.status3;
      }, 1000);
    },
    finish() {
      /*  this.NetId  */
      for (let i = 0; i < this.equipment.length; i++) {
        if (this.id === this.equipment[i].id) {
          this.equipment[i].e_id = this.NetId;
        }
      }
      for (let i = 0; i < this.production.length; i++) {
        if (this.id === this.production[i].id) {
          this.production[i].e_id = this.NetId;
        }
      }
      for (let i = 0; i < this.service.length; i++) {
        if (this.id === this.service[i].id) {
          this.service[i].e_id = this.NetId;
        }
      }
      this.drawer = false;

      //给协议配置确认按钮对象赋值
      this.finish_data_1.id = this.id
      this.finish_data_1.deviceType = this.deviceType
      this.finish_data_1.deviceName = this.dev_name
      this.finish_data_1.deviceDescription=""
      this.finish_data_1.state = 1
      this.finish_data_1.gatewayId = this.NetId//网关ID
      this.finish_data_1.createUser=""
      this.finish_data_1.updateUser=""
      this.finish_data_1.isDeleted = 0
      this.finish_data_1.connector = this.port
      this.finish_data_1.protocol = this.getway_id//协议
      this.finish_data_1.passiveAddress =this.slaveAddress1
      this.finish_data_1.passiveIp = this.slaveip
      this.finish_data_1.passivePort = this.portid
      this.finish_data_1.protocolType = this.m_type
      this.finish_data_1.protocolAddress= this.addr
      this.finish_data_1.protocolNumber = this.num
      this.finish_data_1.targetAddress = this.tar_addr
      this.finish_data_1.targetPort = this.tar_port
      this.finish_data_1.deviceAccount = this.device_account
      this.finish_data_1.devicePassword = this.device_pwd
      this.finish_data_1.clientId = this.clientId
      this.finish_data_1.subscribeTopic = this.sub_topic
      this.finish_data_1.releaseTopic =this.issue_topic
      this.finish_data_1.qos = this.qos
      this.finish_data_1.clearSession = this.cls
      this.finish_data_1.url = this.URL
      this.finish_data_1.securityPolicy= this.securityPolicy
      this.finish_data_1.nodePath = this.file
      this.finish_data_1.certificates = this.password
      this.finish_data_1.readingMethod = this.dataReading
      this.finish_data_1.timeoutSetting = this.timeout
      this.finish_data_1.baudRate = this.RSbaud
      this.finish_data_1.dataBit = this.RSdataBit
      this.finish_data_1.stopBit = this.RSstopBit
      this.finish_data_1.verify = this.RSschool
      this.finish_data_1.frameFormat = this.CANZformat
      this.finish_data_1.frameType = this.CANZtype
      this.finish_data_1.frameId = this.CANZid
      this.finish_data_1.wifiAccount = this.WIFIid
      this.finish_data_1.wifiPassword = this.WIFIpassword
      this.finish_data_1.isSelected = 1

      var jsonString = JSON.stringify(this.finish_data_1)
      //console.log('jsonString',jsonString)
      modifyDeviceList(jsonString).then(res => {
        //console.log('---------',res)
        if (res.status === 200) {
          this.getList()
        }
      })
    },
    cancel() {
    this.port = '';
    this.getway_id = '';
    this.baud = '';
    this.dataBit = '';
    this.stopBit = '';
    this.school = '';
      this.drawer = false;
    },
    store_path() {
      // 处理保存路径逻辑
      const inputElement = document.createElement("input");
      inputElement.type = "file";
      inputElement.webkitdirectory = true; // 在 Chrome 中选择文件夹
      inputElement.multiple = false; // 只能选择一个文件夹
      inputElement.onchange = event => {
        const selectedPath = event.target.files[0].path;
        if (selectedPath) {
          s_path.value = selectedPath;
          // 可以根据需要将路径信息存储在其他变量中
        }
      };
      inputElement.click();
    },
    finish_2() {
      this.drawer_2 = false;
    },
    cancel_2() {
      this.drawer_2 = false;
    },
   handleFileUpload() {
  // 处理文件上传逻辑
  const inputElement = document.createElement("input");
  inputElement.type = "file";
  inputElement.accept = ".csv"; // 可以根据需要设置文件类型限制
  inputElement.onchange = event => {
    const selectedFile = event.target.files[0];
    if (selectedFile) {
      file.value = selectedFile.name;
      // 可以根据需要将文件信息存储在其他变量中
    }
  };
  inputElement.click();
    }
  }
};
</script>

<style lang="scss" scoped>
.equAcc {
  height: 100%;
  font-size: 16px;
  font-weight: 500;
  border-radius: 10px;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  background-color: #fafafa;

  .header {
    position: relative;
    width: 100%;
    padding: 20px 10px 0 10px;
    .add {
      position: absolute;
      right: 10px;
    }
  }

  .table {
    width: 100%;
    max-height: 232px;
    display: flex;
    /*height: calc(100% - 30px);*/
    flex-wrap: wrap;
    overflow: auto;
    margin-top: 10px;

    .cell {
      width: 270px;
      /*height: 140px;*/
      border-right: 1px solid #ccc;
      background-color: #fff;
      border-radius: 10px;
      margin: 10px;
      flex-basis: calc(20% - 20px);
      vertical-align: top; /* 添加垂直对齐方式 *
      /* 20% 表示每个 cell 的宽度为父元素宽度的 20%，并且减去外边距 */

      .cell-box {
        padding-left: 20px;
        border-radius: 10px;
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
      }

      .table-dele-btn {
        position: absolute;
        top: 20px;
        right: 30px;
        transform: translate(50%, -50%);
      }

      .table-title {
        display: inline-block;
        margin-top: 10px;
        font-weight: 700;
      }

      .table-status {
        margin: 6px 0;
        font-size: 14px;
        color: gray;
      }

      .table-id {
        font-size: 14px;
        color: gray;
        padding-bottom: 8px
      }

      .delete-btn {
        margin-left: 100px;
        border: none;
        /* 去除边框 */
        cursor: pointer;
        /* 设置鼠标样式为手型 */
      }
    }

    .selected {
      background-color: #efecec;
      cursor: pointer;
      /* 设置鼠标样式为手型 */
    }
  }

  .adapted {
    box-shadow: 3px -9px 1px -3px #6fc444;
  }

  .unadapted {
    box-shadow: 3px -9px 1px -3px red;
  }

  .equipment,.production,.service {
    width: 100%;
    /*height: calc(30% - 30px);*/
    margin-top: 10px;
  }
}

:deep(.el-table td div.cell) {
  text-align: center;
}

:deep(.el-table__header-wrapper thead th) {
  height: 20px;
  /* 设置表头行高 */
}

:deep(.el-table__body tr) {
  height: 30px;
  /* 设置行高 */
}

.custom-table {
  border-bottom: 1px solid #ccc;
  /* 设置表格的边框样式 */
}

:deep(.el-table) {
  --el-table-border-color: #ccc;
}

:deep(table thead th) {
  color: #000;
}

:deep(.el-table th) {
  font-size: 16px;
}

:deep(.el-table td) {
  font-size: 14px;
}

.sp {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
}

:deep(.el-drawer__body) {
  padding: 0 5px;
}
.port,
  .port_s {
    display: inline-block;
    width: 32%;
    margin-bottom: 0px;
    padding-left: 10px;
    margin-top: 0px;
  }

  .protocol,
  .protocol_s {
    display: inline-block;
    width: 32%;
    margin-bottom: 0px;
    padding-left: 10px;
  }
  .getway_id,
  .getway_id_s {
    display: inline-block;
    width: 32%;
    margin-bottom: 0px;
    padding-left: 10px;
  }

  .Port{
  .RS485{
    .port_setting {
    width: 100%;
    height: 80px;
    margin-top: 10px;
    padding-left: 10px;

    .baud,
    .dataBits,
    .stopBits,
    .school {
      display: inline-block;
      width: 25%; /* 减去间隔的宽度 */
      height: 100%;
    }
  }
  }
  .CAN{
    .port_setting {
    width: 100%;
    height: 80px;
    margin-top: 10px;
    padding-left: 10px;

    .baud,
    .Zformat,
    .Ztype,
    .Zid {
      display: inline-block;
      width: 25%; /* 减去间隔的宽度 */
      height: 100%;
    }
  }

  }
  .NB-IOT{
    .port_setting {
    width: 100%;
    height: 80px;
    margin-top: 10px;
    padding-left: 10px;

    .baud,
    .dataBits,
    .stopBits,
    .school {
      display: inline-block;
      width: 25%; /* 减去间隔的宽度 */
      height: 100%;
    }
  }
  }
}
.Modbus {
  width: 100%;

  .port_setting {
    width: 100%;
    height: 80px;
    margin-top: 10px;
    padding-left: 10px;
    .baud,
    .Zformat,
    .Ztype,
    .Zid {
      display: inline-block;
      width: 25%; /* 减去间隔的宽度 */
      height: 100%;
    }

    .baud,
    .dataBits,
    .stopBits,
    .school {
      display: inline-block;
      width: 25%; /* 减去间隔的宽度 */
      height: 100%;
    }
  }

  .moubus_setting {
    width: 100%;
    height: 80px;
    margin-top: 10px;
    padding-left: 10px;

    .m_type,
    .addr,
    .num {
      display: inline-block;
      width: 20%;
      height: 100%;
    }
  }

  .m_tab {
    width: 100%;
    height: 120px;
  }



}

.MQTT {
  width: 100%;
  .title {
    width: 50%;
    display: inline-block;
    margin-top: 0px;
  }

  .port,
  .port_s {
    display: inline-block;
    width: 32%;
    margin-bottom: 0px;
    padding-left: 10px;
    margin-top: 0px;
  }

  .protocol,
  .protocol_s {
    display: inline-block;
    width: 32%;
    margin-bottom: 0px;
    padding-left: 10px;
  }
  .getway_id,
  .getway_id_s {
    display: inline-block;
    width: 32%;
    margin-bottom: 0px;
    padding-left: 10px;
  }
  .cont {
    padding-left: 10px;
  }


}
.MQTT_SN {
  width: 100%;
  .title {
    width: 50%;
    display: inline-block;
    margin-top: 0px;
  }

  .port,
  .port_s {
    display: inline-block;
    width: 32%;
    margin-bottom: 0px;
    padding-left: 10px;
    margin-top: 0px;
  }

  .protocol,
  .protocol_s {
    display: inline-block;
    width: 32%;
    margin-bottom: 0px;
    padding-left: 10px;
  }
  .getway_id,
  .getway_id_s {
    display: inline-block;
    width: 32%;
    margin-bottom: 0px;
    padding-left: 10px;
  }
  .cont {
    padding-left: 10px;
  }


}
.bottombox{
  width: 100%;
  margin-top: 0px;
  .lineCompile {
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
  }

  .issue {
    height: 30px;
    line-height: 30px;
  }

  .res_status .left,
  .res_status .right {
    width: 50%;
    display: inline-block;
  }

.status_lan {
    widows: 100%;
    height: 100px;
    margin-top: 20px;
    border-bottom: 1px solid #ccc;
  }
}
.line_2 {
  width: 100%;
  padding-left: 10px;

  .period,
  .period_s {
    display: inline-block;
    width: 50%;
    margin-bottom: 10px;
  }

  .protocol,
  .protocol_s {
    display: inline-block;
    width: 50%;
    margin-bottom: 10px;
  }

  .storeFormat,
  .storeFormat_s {
    display: inline-block;
    width: 50%;
    margin-bottom: 10px;
    padding-left: 10px;
  }

  .storePath {
    margin-top: 10px;
  }

  .status_lan {
    widows: 100%;
    height: 350px;
    margin-top: 20px;
    border-bottom: 1px solid #ccc;
  }
}
>>>>>>> 3b24feac27ff1f3481308d21c3f5277aa3dbd283
</style>
